JSON With Ajak

Show

AJAX is Asynchronous JavaScript and XML, that are used at the client-aspect as a collection of interrelated web development techniques so that you can create asynchronous web applications. According to the AJAX model, web applications can send and retrieve information from a server asynchronously without interfering with the display and the behavior of the prevailing page.

Many developers use JSON to pass AJAX updates among the client and the server. Websites updating live sports ratings may be taken into consideration for instance of AJAX. If these ratings need to be updated on the website, then they should be stored at the server so that the webpage can retrieve the rating when it is required. This is where we can make use of JSON formatted information.

Any information that is updated using AJAX may be stored by making use of the JSON format at the webserver. AJAX is used so that javascript can retrieve these JSON documents while necessary, parse them, and perform one of the following operations −

Store the parsed values withinside the variables for further processing before showing them on the webpage.
It directly assigns the information to the DOM elements withinside the webpage, so that they are displayed on the website.

Example

The following code shows JSON with AJAX. Save it as an ajax.htm file. Here the loading characteristic loadJSON() is used asynchronously to upload JSON information.

<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 class = "src">
         <tr><th>Name</th><th>Country</th></tr>
         <tr><td><div id = "Name">Sachin</div></td>
         <td><div id = "Country">India</div></td></tr>
      </table>

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

Given below is the input file data.json, having information in JSON format so as to be uploaded asynchronously when we click on the Update Detail button. This file is being kept in http://www.intellinuts.com/json/

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

The above HTML code will produce the below given screen, where you can check AJAX in action:

Cricketer Details

Name	Country
Sachin	India

When you click on the Update Detail button, you should get the end result something as follows. You can attempt JSON with AJAX yourself, provided your browser supports Javascript:

Cricketer Details

Name	Country
Brett	Australia

JSON With Java

JSON Tutorial

JSON Examples

JSON Other Resources

JSON With Ajak

Contents