JSON with Ajax

Ajax is Asynchronous JavaScript and XML for for asynchronous web applications. Using ajax data from a server asynchronously retrieved and display without reloading the page. So JSON with Ajax is no exception.

JSON stands for JavaScript Object Notation. So, in simple terms JSON is a way of formatting the data. For, e.g., transmitting it over a network.

The key advantage of using JSON is quality programming. JSON is less expressed and covered, resulting in fewer bytes and a faster parsing process which allows us to process more messages sent as JSON than as XML.

In our previous article, we have already discussed the Syntax of JSON.

Now let’s see how jQuery can help us to load JSON encoded data from a remote source.

Here is a simple example JSON with Ajax:

<!DOCTYPE html>
<html>
<body>
<h1>Student List</h1>
<div id="studentDiv"></div>

<script>
$.ajax({
  url: 'ajax.php',
  type: 'GET',
  data: 'class=v',
  success: function(response) {
    var arr = JSON.parse(response);
    var i;
    var str = "<table>";
    for(i = 0; i < arr.length; i++) {
        str += "<tr><td>" +
        arr[i].Name +
        "</td><td>" +
        arr[i].Class +
        "</td><td>" +
        arr[i].Subject +
        "</td></tr>";
    }
    str += "</table>";
    $("#studentDiv").html(str);
  },
  error: function(e) {
    console.log(e.message);
  }
});
</script>

</body>
</html>

JSON is a de-facto standard format for exchanging any text data. jQuery’s $.getJSON() method gives a nice little helper for dealing with almost any scenario that involves a request for JSON formatted data.