AJAX & JSON

Introduction
• JSON (JavaScript Object Notation), is a simple and easy to read and
write data exchange format.
 It is easy for humans to read and write.
 It is easy for machines to parse and generate.
 It is based on a subset of the JavaScript, Standard ECMA-262
 JSON is a text format that is completely language independent; can be used with
most of the modern programming languages.
 The filename extension is .json
 JSON Internet Media type is application/json
 It’s popular and implemented in countless projects worldwide, for those don’t like
XML, JSON is a very good alternative solution.
 Values supported by JSON
• Strings : double-quoted Unicode, with backslash escaping
• Numbers: double-precision floating-point format in JavaScript
• Booleans : true or false
• Objects: an unordered, comma-separated collection of key:value pairs
• Arrays : ordered, comma-separated values enclosed in square brackets
• Null : A value that isn't anything
Demo
 What is Ajax ?
• “Asynchronous JavaScript And XML”
 AJAX is not a programming language, but a technique for making the user
interfaces of web applications more responsive and interactive
 It provide a simple and standard means for a web page to communicate with the
server without a complete page refresh.
• Why Ajax?
 Intuitive and natural user interaction
o No clicking required. Call can be triggered on any event
o Mouse movement is a sufficient event trigger
 "Partial screen update" replaces the "click, wait, and refresh" user interaction model
o Only user interface elements that contain new information are updated (fastresponse)
 The rest of the user interface remains displayed as it is without interruption (no loss
of operational context)
XMLHttpRequest

• JavaScript object - XMLHttpRequest object for asynchronously

exchanging the XML data between the client and the server
• XMLHttpRequest Methods
 open(“method”, “URL”, syn/asyn) : Assigns destination URL, method, mode
 send(content) : Sends request including string or DOM object data
 abort() : Terminates current request
 getAllResponseHeaders() : Returns headers (labels + values) as a string
 getResponseHeader(“header”) : Returns value of a given header
 setRequestHeader(“label”,”value”) : Sets Request Headers before sending

• XMLHttpRequest Properties
 Onreadystatechange : Event handler that fires at each state change
 readyState values – current status of request
 Status : HTTP Status returned from server: 200 = OK
 responseText : get the response data as a string
 responseXML : get the response data as XML data
 Creating an AJAX application
• Step 1: Get an instance of XHR object
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

• Step 2: Make the request

xhr.open('GET', 'http://www.example.org/some.file', true);
xhr.send(null);

xhr.open("POST", "AddNos.jsp");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("tno1=100&tno2=200");

• Step 3 : Attach callback function to xhr object

httpRequest.onreadystatechange = function(){
// process the server response
};
Ajax Demo
AJAX Demo withXML
AJAX Demo withJSON