20    An Introduction to Ajax

Though all this sounds quite complex, it’s actually just a way to refresh individual parts of a web page without reloading the entire web page, which is usually what happens without Ajax. Consequently, you can create faster dynamic web pages by using Ajax. This reduces the amount of data transfer and also saves the nerves of website visitors thanks to shorter loading times.

...
function changeContent() {
  let xmlhttp;

  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }

...
}

... 

Listing 20.5     /examples/chapter020/20_1/js/getServerTime.js

Before you can create an XMLHttpRequest object, you should first verify that the web browser does actually support XMLHttpRequest objects. All modern web browsers will create a new XMLHttpRequest object using the new syntax variable=new XMLHttpRequest().

20.1.3    Making a Request to the Server

...
  xmlhttp.open("GET", "server-time.php", true);
  xmlhttp.send();
... 

Listing 20.6     /examples/chapter020/20_1/js/getServerTime.js

The open() method has the following syntax:

open(method, url, async) 

You can use method to specify the method of the request (HTTP request method), which is usually GET or POST.

You use url to specify the path or URL to the file on the server to be accessed. By the way, this can be any file, and it doesn’t necessarily have to be an executable script on the server, like a PHP script in our example.

You can use async to specify whether the request should be executed asynchronously (true) or synchronously (false). In practice, the asynchronous transfer is usually recommended, that is, setting the value to true, which is what Ajax—Asynchronous JavaScript and XML—stands for. The advantage of an asynchronous data transfer with Ajax is that a JavaScript no longer has to wait for the server’s response and can meanwhile execute other scripts or process the response if it’s available. With a synchronous transfer, on the other hand, a JavaScript doesn’t get executed any further until the response from the server is available. If the server is slow or busy, the application would stop with async=false and remain in a waiting state until the response from the server arrives. Here’s a short summary:

• async=true stands for asynchronous and makes sure that the script continues to run while the HTTP request is being executed in the background.

• async=false stands for synchronous and causes the script execution to stop until the data has returned from the server.

The send() method, on the other hand, allows you to send the request along with the data to the server.

20.1.4    Sending Data

Although in this example, no data gets sent to the script, it should be briefly mentioned here how you can do this with GET or POST. If you’ve used GET as a method, you can write the parameters directly into the URL. In the following code snippet, a few parameters are passed to a script:

xmlhttp.onreadystatechange = function() { ... }; 

You can also pass a function name as a reference as follows, if required:

function aFunction() { ... }
...
xmlhttp.onreadystatechange = aFunction; 

It should be noted here that the readystatechange event gets triggered whenever the state of the XMLHttpRequest object changes.

...
document.querySelector('#refreshtime').innerHTML = 
    xmlhttp.responseText;
... 

Listing 20.8     /examples/chapter020/20_1/js/getServerTime.js

If the return from the server isn’t XML, you should always use the responseText property, where the returned data is an ordinary string. If, on the other hand, the return from the server is XML-encoded and you want to parse this data as an XML object, you should use the responseXML property instead.

20.1.7    The Ajax Example during Execution

Based on the preceding descriptions, you should have understood the example printed at the beginning: /examples/chapter020/20_1/js/getServerTime.js. For this example, you’re still missing the PHP script server-time.php, which was kept quite short and basically only returns an indication of the date and time of the web server:

document.querySelector('#miles').value =
    miles_response.firstChild.nodeValue;
document.querySelector('#yards').value =
    yards_response.firstChild.nodeValue; 

Admittedly, this example is considerably more complex because in addition to JavaScript and server-side script programming, XML and DOM have been added. Nevertheless, the example gives you a first impression of what can be done with Ajax and that it can be worthwhile to deal with it more comprehensively.

In the previous example, you performed a data exchange using XML. At the beginning, I mentioned that Ajax also has other data formats for exchanging information between server and client. A very popular and simpler alternative to XML is JSON, which is probably now more widely used than XML. For this reason, here’s a short introduction to this data format.

JSON enables you to specify objects and arrays as ordinary strings, just as you know it from JavaScript. The process is referred to as serialization.

You can specify an array between square brackets:

["text1", "text2", "text3", "text4"] 

Objects are placed in curly brackets:

{"property1" : "value", "property2" : "value" } 

Even though JSON uses a JavaScript syntax, like XML, this data format is independent of the language. The data format can be read by any programming language.

Here’s a JSON example in which you create a directory object with three entries of zip codes from a combination of city-zip code pairs:

{"directory":[
    {"city":"Portland", "zipCode":97217},
    {"city":"San Francisco", "zipCode":94104},
    {"city":"Philadelphia", "zipCode":19099}
]} 

By the way, JSON requires that the property names (e.g., "city" and "zipCode") be enclosed in double quotes. In addition to objects (in curly brackets) and arrays (in square brackets), you can use a number (integer and floating point), a string (in double quotes), a Boolean value (true or false), and the null value (null) as data types.

Because JSON uses JavaScript syntax, it’s easy to create such an array of objects. In JavaScript, all you need to do is the following:

let directory =  [
    {"city":"Portland", "zipCode":97217},
    {"city":"San Francisco", "zipCode":94104},
    {"city":"Philadelphia", "zipCode":19099}
]; 

Here’s a simple example that demonstrates how you can access the individual entries using JavaScript:

let obj = JSON.parse(text); 

You can use the JSON.parse() method to convert a JSON text into a JavaScript object.

let obj = eval ("(" + text + ")");

Here is the Ajax example where you read this file from the web server using a JSON string, parse it, and output it to a web page:

...
<h1>JSON example with Ajax</h1>
<p id="output"></p>
<script src="js/plzJSON.js"></script>

... 

Listing 20.16     /examples/chapter020/20_1_9/index2.html