Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
108 views

Json With Ajax: Example

This document discusses using JSON with AJAX. AJAX allows asynchronous data retrieval from servers without page reloads. Websites use JSON to pass AJAX updates between clients and servers. The example shows loading JSON data from a file asynchronously via AJAX on a button click and updating page elements with the parsed JSON data without reloading.

Uploaded by

Edukondalu Morla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
108 views

Json With Ajax: Example

This document discusses using JSON with AJAX. AJAX allows asynchronous data retrieval from servers without page reloads. Websites use JSON to pass AJAX updates between clients and servers. The example shows loading JSON data from a file asynchronously via AJAX on a button click and updating page elements with the parsed JSON data without reloading.

Uploaded by

Edukondalu Morla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

JSON WITH AJAX

http://www.tuto rialspo int.co m/jso n/jso n_ajax_e xample .htm Co pyrig ht © tuto rials po int.co m

Ajax is Asynchronous JavaScript and XML which is used on client side as g roup of interrelated web development
techniques in order to create asynchronous web applications. According to Ajax model, web applications can
send data and retrieve data from a server asynchronously without interfering with the display, behavior of
existing pag e.

Many developers use JSON to pass AJAX updates between client and server. Websites updating live sports
scores can be considered as an example of AJAX. If these scores have to be updated on the website, then they
must be stored on the server so that the webpag e can retrieve the score when it is required. T his is where we
can make use of JSON formatted data.

Any data that is updated using AJAX can be stored using the JSON format on web server. Ajax is used so that
javascript can retrieve these JSON files when necessary, they parse them and then does of the two:

Store the parsed values in variables for further processing before displaying them on the webpag e

It directly assig n the data to the DOM elements in the webpag e, so that it g ets displayed on the website.

Example
T he below code shows JSON with Ajax, save it in ajax.htm file. Here loading function loadJSON() will be used
asynchronously to upload JSON data.

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
var data_file = "http://www.tutorialspoint.com/json/data.json";
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 )
{
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);

// jsonObj variable now contains the data structure and can


// be accessed as jsonObj.name and jsonObj.country.
document.getElementById("Name").innerHTML = jsonObj.name;
document.getElementById("Country").innerHTML = jsonObj.country;
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
<title>tutorialspoint.com JSON</title>
</head>
<body>
<h1>Cricketer Details</h1>
<table >
<tr><th>Name</th><th>Country</th></tr>
<tr><td><div >Sachin</div></td>
<td><div >India</div></td></tr>
</table>

<div >
<button type="button" onclick="loadJSON()">Update Details </button>
</body>
</html>

Following is the input file data.json having data in JSON format which will be uploaded asynchronously when we
click Update Detail button. T his file is being kept in http://www.tutorialspoint.com/json/

{"name": "brett", "country": "Australia"}

Above HT ML code will g enerate following screen, where you can check AJAX in action:

CRICKETER DETAILS

Name Country

Updat e Det ails

When you click on Update Detail button, you should g et a result something as follows, you can try it yourself
JSON with AJAX provided your browser supports Javascript.

CRICKETER DETAILS

Name Country

You might also like