07-AJAX.pdf - AJAX 2018\/19 COMP3322A Modern Technologies on WWW Contents What is AJAX Demo 1 Our Registration Form Overview of XML Overview of JSON Demo

07-AJAX.pdf - AJAX 2018/19 COMP3322A Modern Technologies...

This preview shows page 1 - 10 out of 39 pages.

AJAX 2018/19 COMP3322A Modern Technologies on WWW
Image of page 1
Contents What is AJAX? Demo 1 Our Registration Form Overview of XML Overview of JSON Demo 2 Our Registration Form
Image of page 2
AJAX a .
Image of page 3
Consider a webpage that displays the server’s time
Image of page 4
Consider a webpage that displays the server’s time
Image of page 5
The XMLHttpRequest Object The XMLHttpRequest object is the core of AJAX. How AJAX works: At client-end (JavaScript) To send an HTTP request, create an XMLHttpRequest object. Register a callback function to the onreadystatechange property of the XMLHttpRequest object. Use the open() and send() method of XMLHttpRequest object to sent the request to server. Use either GET or POST method. Use either synchronous or asynchronous mode. When the response arrives, the callback function is triggered to act on the data. Usually rendering the web page using the DOM, that eliminates page refresh.
Image of page 6
The XMLHttpRequest Object All modern browsers support the XMLHttpRequest object. However, old versions of Internet Explorer (5/6) use an ActiveX object instead. If you do not want to support old versions, just simple declare the object. // Old compatibility code, no longer needed. if ( window . XMLHttpRequest ) { // Mozilla, Safari, IE7+ ... httpRequest = new XMLHttpRequest (); } else if ( window . ActiveXObject ) { // IE 6 and older httpRequest = new ActiveXObject ( "Microsoft.XMLHTTP" ); } var httpRequest = new XMLHttpRequest (); if (! httpRequest ) { // do something to alert user }
Image of page 7
Open() & send() To define the request, use open() open (method, url, async) where: method: the request type GET or POST url: the server resource async: [default] true if asynchronously; false if synchronously. To send the request, user send() send () or send (string) string: only used for POST To use POST to send data, you may have to set the MIME type of the request too. httpRequest . open ( 'GET' , 'process.php?name=value' , true ); httpRequest . send (); httpRequest . open ( 'POST' , 'process.php' , true ); httpRequest . setRequestHeader ( 'Content-Type' , 'application/x-www-form-urlencoded' ); httpRequest . send ( 'name=value' );
Image of page 8
XMLHttpRequest Object Properties Property Description onreadystatechange Registers a function to be called when the readyState property changes readyState Holds the status of the XMLHttpRequest. 0: request not initialized 1 : server connection established 2: request received 3: processing request 4 : request finished and response is ready responseText Returns the response data as a string responseXML Returns the response data as XML data status Returns the status-number of a request, e.g, 200, 302, 404, .. statusText Returns the status-text function callback () { if ( receive good response ) : else : } httpRequest . onreadystatechange = callback ; Register a callback function to the onreadystatechange property.
Image of page 9
Image of page 10

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture