1 / 16

AJAX

AJAX. Asynchronous Javascript And XML. AJAX. What is AJAX? A synchronous J avaScript a nd X ML enables browser to execute a server-side script without refreshing the page. AJAX. BROSWER. anotherrequest. Sends request. Awaits response. Refreshes page. Sends response. SERVER.

christen-conley
Download Presentation

AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX Asynchronous Javascript And XML

  2. AJAX What is AJAX? • Asynchronous JavaScript and XML • enables browser to execute a server-side script without refreshing the page.

  3. AJAX BROSWER anotherrequest Sends request Awaits response Refreshes page Sends response SERVER Web-browsing without AJAX (synchronous)

  4. AJAX BROSWER Continues browsing, updates part of page when response arrives SERVER Web-browsing with AJAX (asynchronous)

  5. AJAX Application Auto completion for form fields(Google Suggest) Live Chat(XHTML live Chat) enables the programmer to execute a server-side script without refreshing the page.

  6. AJAX • Process HTTPRequest • Create response & send back to browser • Create an XMLHttpRequest object • Send HttpRequest • Process the returned data • Update page content How it works?

  7. AJAX if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=stateChange; xmlhttp.open("GET",url,true); xmlhttp.send(null); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=stateChange; xmlhttp.open("GET",url,true); xmlhttp.send(); } } Code Example:

  8. AJAX Internet Explorer (IE 5/6): xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); or xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); Other browsers & IE7,8 (IE 5/6): xmlhttp = new XMLHttpRequest(); XMLHTTPRequest

  9. AJAX • Properties • onreadystatechange • readyState • responseText • responseXML • status • statusText • Methods • abort() • open() • send() XHTTPRequest object

  10. AJAX • 0. Uninitializedopen() has not been called yet. • Loadingsend() has not been called yet. • Loadedsend() has been called, and status are available. • Interactivedownloading • Completedoperation is complete. • Properties • readyState XHTTPRequest object

  11. AJAX Step 1 Create an instance Building the request Step 2 Assign onreadystatechange function define what to do with each readyState Step 3 Make the request execute open() & send() methods XHTTPRequest object

  12. AJAX Step 1 Create instance var xhr=null; try { xhr = new XMLHttpRequest(); } catch(e) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e2) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } Code Example:

  13. AJAX Step 1 Create instance var xhr=null; try { xhr = new XMLHttpRequest(); } catch(e) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e2) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } xhr.onreadystatechange = function() { document.ajax.dyn.value = "Wait server..."; if(xhr.readyState == 4) { if(xhr.status == 200) document.ajax.dyn.value=xhr.responseText; else document.ajax.dyn.value = "Error "; } }; Step 2 Assign onreadystatechange Code Example:

  14. AJAX Step 1 Create instance var xhr=null; try { xhr = new XMLHttpRequest(); } catch(e) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e2) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } xhr.onreadystatechange = function() { document.ajax.dyn.value = "Wait server..."; if(xhr.readyState == 4) { if(xhr.status == 200) document.ajax.dyn.value=xhr.responseText; else document.ajax.dyn.value = "Error "; } }; xhr.open("GET", "data.xml", true); xhr.send(null); Step 2 Assign onreadystatechange Step 3 Make request Code Example:

  15. AJAX Readings from online resources http://www.xul.fr/en-xml-ajax.html http://www.xul.fr/XMLHttpRequest-object.html

  16. AJAX Example Form without using AJAX: http://www2.hci.edu.sg/yongjs/currencyconverter/ With AJAX: http://www2.hci.edu.sg/yongjs/currencyconverter/index2.html

More Related