1 AJAX 2 3 Introduction AJAX: Asynchronous JavaScript and XML Popular in 2005 by Google Create interactive web applications Exchange small amounts of data with the server behind the scenes No need to reload the whole page whenever a user requests a change Asynchronous: loading does not interfere with normal page loading 4
12
Embed
AJAX - Hong Kong Polytechnic Universitynflaw/EIE4432Sem12017-18/p4s.pdf · 13 XMLHttpRequest Properties: onreadystatechange Returns or sets the event handler for asynchronous requests
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
AJAX
2
3
IntroductionAJAX: Asynchronous JavaScript and XML
Popular in 2005 by GoogleCreate interactive web applications
Exchange small amounts of data with the server behind the scenesNo need to reload the whole page whenever a user requests a change
Asynchronous: loading does not interfere with normal page loading
4
5 6
7
OverviewAJAX: Asynchronous JavaScript and XML
Not a new programming languageUse existing techniques to create better, faster, and interactive web applications
JavaScript + HTML/XHTML/XMLJavaScript: programming language
Communicate with the serverAsynchronous data transfer (HTTP requests) between browser and server
XML:Small bits of information sent between browser and serve
Trades data with a web server without reloading the pageChanges to the underlying data are immediately reflected in the web pageAllow web pages to request small bits of information from the server, instead of whole pages
8
Usage: Live search
9
Usage: voting
10
Overview - techniquesJavaScript + HTML/XHTML/XML
JavaScript:XMLHTTPRequest object communicate with the serverSend HTTP requestReceive HTTP responseHandle the response
Methods:open
Define the method used (GET or POST), URL to send the request, and how the request, whether synchronous or asynchronous, is sent.
sendSends the request to the server
Properties:
11
XMLHttpRequestTwo ways to use the object
Synchronous usageWait for the response, hold processing until a response is received
Asynchronous usageContinue processing, interrupt once a response is received
Security limitations:Can only connect to same domain as currently loaded page (same point of origin)
12
XMLHttpRequest MethodsSending request (asking for data)2 methods:
open(“GET”, “time.php”, true) methodFirst argument: “GET” or “POST”Second argument: URL of the server-side scriptThird argument:
true means that the request should be handled asynchronouslyfalse means that it is a synchronous request
Hold up the processing until a request is receivedsend() method
Sends the request to the server
13
XMLHttpRequestProperties:
onreadystatechangeReturns or sets the event handler for asynchronous requests
readyStateReturns a code representing the state of the request
responseTextReturns the HTTP response as a string
responseXMLReturns the HTTP response as an XML DOM object
statusReturns the HTTP status code
statusTextReturns the text that describes what a particular HTTP status code means
14
onreadystatechangeDefines a function to receive data returned by the server after a request is sentMust be set before sending requestCode:
var xmlhttp = new XMLHttpRequest();xmlHttp.onreadystatechange = myfunction() {
// code for receiving response data}
15
readyStateThis property holds the status of the server’s responseEach time the readyState changes, the onreadystatechange function will be executedreadystate Property: state description
0: the request is not initializedObject has been created, but not yet been initialized
1: the request has been set upHas been initialized
2: the request has been sentThe send method has been called, waits for the return of the status code
3: the request is in processSome of the data has been received, but not all
4: the request is complete
16
Update the functionCode:
var xmlhttp = new XMLHttpRequest();xmlHttp.onreadystatechange = myfunction() {
if (xmlhttp.readyState==4) {// code for receiving response data
}}
17
responseText and responseXMLRetrieve data returned by the serverresponseText:
Returns the HTTP response as a stringpText.value = xmlhttp.responseText;
responseXML:Returns the HTTP response as an XML DOM object
Var xmldoc = xmlhttp.responseXML.documentElement;Access it as a DOM document
status: HTTP status code (200, 404, …)
18
Example
19
Basic ProcessDefine an object for sending HTTP requestsInitiate request
Get request objectDesignate a request handler functionInitiate a GET or POST requestSend data
Handle responseWait for readyState==4Extract returned dataProgramme your code for the receiving data
20
Define XMLHttpRequest Object
Different browsers uses different methods to create the XMLHttpRequest object
<title>, <author>, <year><title> is a start-tag</title> is an end-tag<title> A First Course in Database Systems</title>: is an elementA First course in Database Systems: element content
Code
28
XML Tree
Root element<collection>
Element:<book>
Element:<title>
Element:<author>
Element:<year>
parent child
siblings
Code
29
XML DOMDefines a standard way for accessing and manipulating XML documentsDOM:
Views XML documents as a tree-structurexmlDoc.getElementsByTagName(“xmlname”)[0].childNodes[0].nodeValue
30
Book.xml
getElementsByTagName("title")[0]<title> A First … </title>