Introduction to JSON & Ajax

C O M P I L E D B Y : S E B L E N .
D E P A R T M E N T O F C O M P U T E R S C .
A D D I S A B A B A U N I V E R S I T Y
2
• JSON is a syntax for storing and exchanging data
• JSON is an easier-to-use alternative to XML
• JSON is language independent
• JSON uses JavaScript syntax, but the JSON format is text
only, just like XML

3
JSON
XML

4
Similarities
• Both JSON and XML are
hierarchical (values within values)
• Both JSON and XML can be
parsed by any programming
language
• Both JSON and XML can be
fetched with an XMLHttpRequest
Differences
• JSON doesn't use end tag
• JSON is shorter
• JSON is quicker to read and
write
• JSON can use arrays
• XML has to be parsed with
an XML parser. JSON can be
parsed by a standard
JavaScript function

5
• JSON syntax is derived from JavaScript object notation
• Example:
• Javascript Object
• JSON Object
• JSON Text/String
• JSON Array

6
• Data is in name/value pairs
• name and value are separated by “:” and field name is double
quoted
• Value can be
• A number (integer or floating point)
• A string (in double quotes)
• A Boolean (true or false)
• An array (in square brackets)
• An object (in curly braces)
• null

7
• The JavaScript function JSON.parse(text) can be used to
convert a JSON text into a JavaScript object:
• The JavaScript function JSON.stringify(object) can be used to
convert JavaScript object to JSON String

8
• A common use of JSON is to exchange data between the
client and a web server
• Objects in PHP can be converted into JSON by using the PHP
function json_encode()

9
Asynchronous JavaScript and XML
• AJAX allows web pages to be updated asynchronously by
exchanging small amounts of data with the server behind the scenes
• With Ajax you can:-
• Update a web page without reloading the page
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background
• Examples of applications using AJAX:
• Google Maps, Gmail, YouTube, and Facebook.

10

11
• Many of the tasks performed on the server are very time consuming.
Before AJAX, retrieving data from server behind the scenes could
cause the application to hang or stop
• With AJAX, the JavaScript does not have to wait for the server
response, but can instead:
• execute other scripts while waiting for server response
• deal with the response when the response ready

12
XMLHttpRequest Object
• The keystone of AJAX is the XMLHttpRequest object
• The XMLHttpRequest object is used to exchange data with a
server behind the scenes
• Syntax for creating an XMLHttpRequest object:
• var xhttp = new XMLHttpRequest();

13
Send a Request to a Server
• To send a request to a server, the open() and send() methods
of the XMLHttpRequest object are used:
Method Description
open(method, url,
async)
Specifies the type of request
method: the type of request: GET or POST
url: the server (file) location
async: true (asynchronous) or false
(synchronous)
send() Sends the request to the server (used for GET)
send(string) Sends the request to the server (used for POST)

14
Send a Request to a Server …
• xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
• xhttp.open("GET", “reg.php?fname=Henry&lname=Ford", true);
xhttp.send();
• xhttp.open("POST", "demo_post.php", true);
xhttp.send();
• To POST form, add an HTTP header with setRequestHeader()
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xhttp.send("fname=Henry&lname=Ford");

15
AJAX - Server Response
• The response from a server, can be accessed through the
responseText or responseXML property of the
XMLHttpRequest object
• responseText - get the response data as a string
• responseXML - get the response data as XML data
• document.getElementById("demo").innerHTML =
xhttp.responseText;

16
• The readyState property holds the status of the
XMLHttpRequest: Changes from 0 to 4
• 0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
• The onreadystatechange event is triggered every time the
readyState changes.

17
• onreadystatechange event: specify what will happen when
the server response is ready to be processed
• When readyState is 4 and status is 200, the response is ready

18
• If you have more than one AJAX task on your
website, you should create ONE standard function
for creating the XMLHttpRequest object, and call
this for each AJAX task

19
• jQuery provides several methods for AJAX
functionality.
• With the jQuery AJAX methods, you can request
text, HTML, XML, or JSON from a remote server
using both HTTP Get and HTTP Post

20
• The load() method loads data from a server and puts the
returned data into the selected element
• Syntax
• $(selector).load(URL,data,callback);
• URL: required parameter, specifies the URL you wish to load.
• data: optional, specifies a set of querystring key/value pairs to
send along with the request.
• callback: optional, is the name of a function to be executed after
the load() method is completed.
• $("#div1").load("demo_test.txt");

21
• specifies a callback function to run when the load() method is
completed
• The callback function can have different parameters:
• responseTxt - contains the resulting content if the call
succeeds
• statusTxt - contains the status of the call
• xhr - contains the XMLHttpRequest object

22
• The jQuery get() and post() methods are used to request data
from the server with an HTTP GET or POST request
• GET is used for just getting data from the server
• Note: The GET method may return cached data
• POST can also be used to get some data from the server.
However, the POST method NEVER caches data, and is often
used to send data along with the request.

23
• The $.get() method requests data from the server with an HTTP
GET request.
• Syntax
• $.get(URL,callback);
• URL : required parameter, specifies the URL you wish to
request.
• callback: optional parameter , is the name of a function to be
executed if the request succeeds. Has two parameters:
• Data: holds the content of the page requested
• Status: holds the status of the request

24

25
• The $.post() method requests data from the server with an HTTP
POST request.
• Syntax
• $.get(URL,data, callback);
• URL : required parameter, specifies the URL you wish to
request.
• data: optional, specifies some data to send along with the request
• callback: optional parameter , is the name of a function to be
executed if the request succeeds. Has two parameters:
• Data: holds the content of the page requested
• Status: holds the status of the request

26

Introduction to JSON & Ajax

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to JSON & Ajax

Similar to Introduction to JSON & Ajax (20)

More from Seble Nigussie

More from Seble Nigussie (9)

Recently uploaded

Recently uploaded (20)

Introduction to JSON & Ajax