RIA 08 - AJAX and jQuery
-
Upload
johannes-hoppe -
Category
Technology
-
view
1.723 -
download
0
description
Transcript of RIA 08 - AJAX and jQuery
![Page 1: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/1.jpg)
STAATLICHANERKANNTEFACHHOCHSCHULE
Author: Dip.-Inf. (FH) Johannes HoppeDate: 08.12.2010
STUDIERENUND DURCHSTARTEN.
![Page 2: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/2.jpg)
STAATLICHANERKANNTEFACHHOCHSCHULE
RIA – Rich Internet Applications
Author: Dip.-Inf. (FH) Johannes HoppeDate: 08.12.2010
![Page 3: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/3.jpg)
Message Exchange Patterns
0109.04.2023
Folie 3
![Page 4: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/4.jpg)
Message Exchange Patterns
General
› I use Microsoft terminology which bases on› SOAP terminology
› I will only introduce the most common patterns› Patterns are always general solutions
› and do not relay on a special platform or transport protocol!
› Book recommendations:› Tanenbaum / Steen: Distributed Systems: Principles and Paradigms› Lowy: Programming WCF Services
09.04.2023
Folie 4
![Page 5: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/5.jpg)
Message Exchange Patterns
Request-Reply
09.04.2023
Folie 5
Most common:Client issues a request in the form of a message, and blocks until he gets the reply message.
![Page 6: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/6.jpg)
Message Exchange Patterns
One-Way
09.04.2023
Folie 6
Fire-and-forget:Client issues the call, but no correlated reply message willever return to the client.(Except network errors)
![Page 7: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/7.jpg)
Message Exchange Patterns
Duplex (callback)
09.04.2023
Folie 7
2x One-Way:Both parties have a server roleand can call each other.
![Page 8: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/8.jpg)
„Classic“ Surfing (Synchronous Dataflow)
09.04.2023
Folie 8
page1.php page2.php page3.php
Data processing... Data processing…
![Page 9: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/9.jpg)
Message Exchange Patterns
Discussion:
Which patternis used for AJAX?
09.04.2023
Folie 9
![Page 10: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/10.jpg)
Asynchronous Dataflow
09.04.2023
Folie 10
Data processing... Data processing…Data processing... Data processing...
![Page 11: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/11.jpg)
Message Exchange Patterns
AJAX
09.04.2023
Folie 11
› Request-Replay that is not blocking the browser’s UI(by using a separate thread!)
› W3C: XMLHttpRequest› According to HTTP/1.1, a client should only
have two connections open to one host at the same time Own queuing has to be implemented!
![Page 12: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/12.jpg)
Message Exchange Patterns
Questions?
?
09.04.2023
Folie 12
![Page 13: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/13.jpg)
Protocols and Formats
0209.04.2023
Folie 13
![Page 14: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/14.jpg)
Protocols and Formats
Endpoint
› is the fusion of the Address, Binding and Contract
09.04.2023
Folie 14
Example:› A – http://test.com/service› B – HTTP› C – Methods to call
› “Explicit style”: WSDL + SOAP› “Implicit style”: REST / JSON
![Page 15: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/15.jpg)
Protocols and Formats
09.04.2023
Folie 15
SOAP
![Page 16: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/16.jpg)
Protocols and Formats
09.04.2023
Folie 16
REST
![Page 17: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/17.jpg)
Protocols and Formats
› SOAP: Simple Object Access Protocol› for Remote Procedure Calls, standardized but complex› Implements a webservice› Bases on XML (much traffic)› On top of HTTP / HTTPS› URI usually stays unchanged, GET: http://test.com/service› Hard to implement “by hand”
› WSDL: Web Services Description Language› Meta Language› Describes webservice’s methods› Bases on XML (much traffic)› Hard to implement “by hand”
09.04.2023
Folie 17
![Page 18: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/18.jpg)
Protocols and Formats
09.04.2023
Folie 18
“REST is an architectural style that is only present when all of itsconstraints are met.”
Thomas Roy Fielding, 2003 on http://tech.groups.yahoo.com/group/rest-discuss/message/3623
![Page 19: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/19.jpg)
Protocols and Formats
› REST: Representational State Transfer
› Paradigm change: describes a very simple architecture with known standards› Implements a webservice› Note: there is no "official" standard for RESTful web services› “Leverages” the full potential of HTTP (URIs, verbs, status codes)› Usually XML or JSON are used as the “protocol” for transferring data› Easy to implement “by hand”
09.04.2023
Folie 19
![Page 20: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/20.jpg)
Protocols and Formats
› REST: Example
GET: http://test.com/service --> Result + Status code: 200 OK POST: http://test.com/service/1 --> Status code: 201 Created PUT: http://test.com/service/1 --> Status code: 202 Accepted DELETE: http://test.com/service/1 --> Status code: 205 Reset Content
09.04.2023
Folie 20
![Page 21: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/21.jpg)
Protocols and Formats
› JSON: JavaScript Object Notation
› Used for serializing data› Lightweight and text-based› bases on a subset of the JavaScript programming language› Uses the object-style {key:value} and [array-style] notation› Elements: Number, String, Boolean, Object {}, Arrays [] and null
09.04.2023
Folie 21
![Page 22: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/22.jpg)
Protocols and Formats
› JSON: JavaScript Object Notation
09.04.2023
Folie 22
{ "Name": "Johannes Hoppe", "Address": { "Street": "Musterstraße 1", "City": "Musterstadt", "PostalCode": "12345", "Country": "Germany" }, "Dogs": [ "Abby", "Ronja" ]}
![Page 23: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/23.jpg)
Protocols and Formats
› Firebug
09.04.2023
Folie 23
![Page 24: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/24.jpg)
Protocols and Formats
Questions?
?
09.04.2023
Folie 24
![Page 25: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/25.jpg)
jQuery
0309.04.2023
Folie 25
![Page 26: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/26.jpg)
jQuery
› Most popular, cross-browser JavaScript library› Focusing on making client-side scripting of HTML simpler
› Easy navigating the DOM› Handling events› Working with Ajax
› Open-source, released in 2006
09.04.2023
Folie 26
![Page 27: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/27.jpg)
jQuery
Advantages› Lightweight› Easy to learn using familiar CSS syntax:
$(‘#id').hide().css('background', 'red').fadeIn(); › Many, many plugins available› Easy to extend and compatible› Rich community
09.04.2023
Folie 27
![Page 28: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/28.jpg)
jQuery
Microsoft & jQuery
› It’s on Microsoft’s “radar”› Included with Visual Studio in both WebForms and MVC projects› Open-source contributions by Microsoft:
› Templating› Data Linking and› Globalization
09.04.2023
Folie 28
![Page 29: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/29.jpg)
jQuery
Before jQuery:
<script type="text/javascript"> /* WTF??? */ window.onload = function() { document.getElementById('testButton').onclick =
function() { document.getElementById('xyz').style.color = 'red'; }; };</script>
09.04.2023
Folie 29
![Page 30: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/30.jpg)
jQuery
With jQuery:
<script type="text/javascript" src=“/Scripts/jquery-1.4.1.min.js"></script><script type="text/javascript"> $(document).ready(function () {
$('#testButton').click(function () { $(this).addClass("redCssClass"); }); });</script>
09.04.2023
Folie 30
![Page 31: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/31.jpg)
jQuery
DEMO
09.04.2023
Folie 31
![Page 32: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/32.jpg)
jQuery
jQuery fundamentals: $
› $ function (aka jQuery() function) returns…› a JavaScript object containing an array of DOM elements› in the order they were found in the document› Matching a specified selector (for example a CSS selector)
$("div.someClass").show();
09.04.2023
Folie 32
Finds all DIVs withClass someClass andSets them visible
![Page 33: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/33.jpg)
jQuery
jQuery fundamentals: $
› Returned elements can be chained:
$("div.someClass").show().addClass("SomeOtherClass");
09.04.2023
Folie 33
To the same set, thisadds another class
![Page 34: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/34.jpg)
jQuery
jQuery fundamentals: the ready handler
› Script execution should wait until DOM elements are ready› window.onload waits for everything to be loaded too late! › jQuery’s Ready:
wait only until the DOM tree is created cross-browser situations
09.04.2023
Folie 34
$(document).ready(function() { $("div.someClass").show();});
![Page 35: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/35.jpg)
jQuery fundamentals: selectors
› CSS selectors
› Child selector
jQuery
$("p a.someClass")
$("p a.someClass, div")
$("ul.someList > li > a")
Selects all a’s with someClass
applied within a paragraph....also includes all DIVsSelects all links, directly in an LI,
within an UL with someList class
![Page 36: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/36.jpg)
jQuery fundamentals: selectors
› Attribute selector
jQuery
Selects all links that contain a reference to site test.de
$("a[href*='http://test.de']")
$("span[class^='some']")
$("span[class]")
Select all SPANs whose class
attribute starts with some
Select all SPANs that have a class
![Page 37: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/37.jpg)
jQuery fundamentals: selectors
› Position
› Psuedo-classes
jQuery
$("a:first")
$("div:even")
Selects first A we can findSelects the “even” DIVs
$("input:checked")
$(":password")
$("input:not(:checked)")
Selects checked inputsWill selects all INPUTs of type
password
![Page 38: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/38.jpg)
jQuery
DEMO
09.04.2023
Folie 38
![Page 39: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/39.jpg)
jQuery
jQuery fundamentals: more to learn
http://api.jquery.com
09.04.2023
Folie 39
![Page 40: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/40.jpg)
jQuery
Simple Ajax with jQuery
› To load content from a server-side resource: load()
09.04.2023
Folie 40
$('#result').load('ajax/test.html');Load data from the server and
place the returned HTML
into the matched element.
![Page 41: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/41.jpg)
jQuery
More advanced Ajax with jQuery
09.04.2023
Folie 41
$.ajax({type: "post",contentType: "application/json; charset=utf-8",dataType: "json",url: "/WebNote/AddNote",data: JSON.stringify(data)
});Note: no callbackwas defined here!
![Page 42: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/42.jpg)
jQuery
09.04.2023
Folie 42
More AJAX: next week!
![Page 43: RIA 08 - AJAX and jQuery](https://reader033.fdocuments.net/reader033/viewer/2022061200/547710fcb4af9fe7248b48b4/html5/thumbnails/43.jpg)
THANK YOUFOR YOUR ATTENTION
09.04.2023
Folie 43