Ajax Asynchronous JavaScript and XML Term coined on the 18 th - - PowerPoint PPT Presentation

▶
ajax
SMART_READER_LITE
LIVE PREVIEW

Ajax Asynchronous JavaScript and XML Term coined on the 18 th - - PowerPoint PPT Presentation

Apr 03, 2024 361 likes •453 views

Ajax Asynchronous JavaScript and XML Term coined on the 18 th February 2005 by Jesse James Garrett Asynchronous HTTP requests vs. Synchronous Which means... Interactive vs. Passive All from Javascript Why Ajax? I needed

slide-1
SLIDE 1

Ajax

Asynchronous JavaScript and XML

◮ Term coined on the 18th February 2005 by Jesse James

Garrett

◮ Asynchronous HTTP requests vs. Synchronous ◮ Which means... Interactive vs. Passive ◮ All from Javascript

Why Ajax? “I needed something shorter than ’Asynchronous JavaScript+CSS+DOM+XMLHttpRequest’ to use when discussing this approach with clients.”

f-iacobelli@neiu.edu MAP

slide-2
SLIDE 2

Ajax

Asynchronous JavaScript and XML

◮ Term coined on the 18th February 2005 by Jesse James

Garrett

◮ Asynchronous HTTP requests vs. Synchronous ◮ Which means... Interactive vs. Passive ◮ All from Javascript

Why Ajax? “I needed something shorter than ’Asynchronous JavaScript+CSS+DOM+XMLHttpRequest’ to use when discussing this approach with clients.”

f-iacobelli@neiu.edu MAP

slide-3
SLIDE 3

Ajax

Asynchronous vs. Synchronous web apps

f-iacobelli@neiu.edu MAP

slide-4
SLIDE 4

Ajax Requests

XMLHttpRequest

◮ Object that retrieves the contents of a URL ◮ Trace its roots to Microsoft ActiveX controls ◮ Has many properties

◮ readyState 0 → 1 → 2 → 3 ◮ resoponseText: the contents of the URL ◮ status: HTTP Status (200, 404, 500, more here..) ◮ statusText ◮ open ◮ readystatechange: listener for this event with callback

function

f-iacobelli@neiu.edu MAP

slide-5
SLIDE 5

Ajax Callbacks

Call Me, Maybe

◮ Once XMLHttpRequest completes it calls a function ◮ Which function? a callback function ◮

request=new XMLHttpRequest(); request.addEventListener("readystatechage",someFunction,false); f-iacobelli@neiu.edu MAP

slide-6
SLIDE 6

Ajax

The Callback Function’s role

function someFunction(){ if(request.readyState==4 && asyncRequest/status == 200){ document.getElementById("SomeId").innerHTML = request.responseText; } } f-iacobelli@neiu.edu MAP

slide-7
SLIDE 7

Ajax

The Callback.. Maybe part

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; Â } } xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); xmlhttp.send(); } f-iacobelli@neiu.edu MAP

slide-8
SLIDE 8

Ajax/JSON

JSON

◮ Natural way to represent objects in Javascript ◮ increasingly popular ◮ JSON.parse does the work for us

f-iacobelli@neiu.edu MAP