AJAX - Sending a Request to the Server

The XMLHttpRequest object is used to exchange data with the server.

Sending a Request to the Server

To send a request to the server, we use the open() and send() methods of the XMLHttpRequest object:

xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();

GET or POST?

GET is simpler and faster than POST and can be used in most cases.

However, use POST requests in the following cases:

• You do not want to use cached files (update files or databases on the server)
• You are sending a large amount of data to the server (POST has no size limitations)
• You are sending user input with unknown characters, POST is more stable and reliable than GET

GET Request

A simple GET request:

Example

xmlhttp.open("GET", "/try/ajax/demo_get.php", true);
xmlhttp.send();

In the above example, you might get cached results.

To avoid this, add a unique ID to the URL:

Example

xmlhttp.open("GET", "/try/ajax/demo_get.php?t=" + Math.random(), true);
xmlhttp.send();

If you want to send information via the GET method, add the information to the URL:

Example

xmlhttp.open("GET", "/try/ajax/demo_get2.php?fname=Henry&lname=Ford", true);
xmlhttp.send();

POST Request

A simple POST request:

Example

xmlhttp.open("POST", "/try/ajax/demo_post.php", true);
xmlhttp.send();

If you need to send data like an HTML form, use setRequestHeader() to add an HTTP header. Then specify the data you want to send in the send() method:

Example

xmlhttp.open("POST", "/try/ajax/demo_post2.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

URL - File on the Server

The url parameter in the open() method is the address of the file on the server:

xmlhttp.open("GET", "ajax_test.html", true);

The file can be of any type, such as .txt and .xml, or server-side script files like .asp and .php (which can perform tasks before returning a response).

Asynchronous - True or False?

AJAX stands for Asynchronous JavaScript and XML.

For the XMLHttpRequest object to be used with AJAX, the async parameter in the open() method must be set to true:

xmlhttp.open("GET", "ajax_test.html", true);

For web developers, sending asynchronous requests is a significant advancement. Many tasks performed on the server can be quite time-consuming. Before AJAX, this could cause applications to hang or stop.

With AJAX, JavaScript does not need to wait for the server's response:

• It executes other scripts while waiting for the server's response
• It processes the response when it is ready

Async=true

When using async=true, specify a function to be executed when the response is ready in the onreadystatechange event:

Example

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "/try/ajax/ajax_info.txt", true);
xmlhttp.send();

You will learn more about onreadystatechange in later chapters.

Async=false

To use async=false, change the third parameter in the open() method to false:

xmlhttp.open("GET", "test1.txt", false);

We do not recommend using async=false, but it is acceptable for small requests.

Remember, JavaScript will wait for the server's response before continuing. If the server is busy or slow, the application may hang or stop.

Note: When using async=false, do not write an onreadystatechange function - place the code after the send() statement:

Example

xmlhttp.open("GET", "/try/ajax/ajax_info.txt", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;