JSON - Use in Ajax

Use in Ajax

JSON is often used in Ajax techniques. Ajax is a term for the ability of a webpage to request new data after it has loaded into the web browser, usually in response to user actions on the displayed webpage. As part of the Ajax model, the new data is usually incorporated into the user interface display dynamically as it arrives back from the server. An example of this in practice might be that while the user is typing into a search box, client-side code sends what they have typed so far to a server that responds with a list of possible complete search terms from its database. These may be displayed in a drop-down list beneath the search, so that the user may stop typing and select a complete and commonly used search string directly. When it was originally described in the mid-2000s, Ajax commonly used XML as the data interchange format but many developers have also used JSON to pass Ajax updates between the server and the client.

The following JavaScript code is one example of a client using XMLHttpRequest to request data in JSON format from a server. (The server-side programming is omitted; it has to be set up to respond to requests at url with a JSON-formatted string.)

var my_JSON_object = {}; var http_request = new XMLHttpRequest; http_request.open("GET", url, true); http_request.onreadystatechange = function { var done = 4, ok = 200; if (http_request.readyState == done && http_request.status == ok) { my_JSON_object = JSON.parse(http_request.responseText); } }; http_request.send(null);