Ajax Xmlhttprequest Send

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

Send 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();

Method	Description
open(method,url,async)	Specifies the type of request, the URL, and whether the request should be handled asynchronously or not. method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous)
send(string)	Sends the request off to the server. string: Only used for POST requests

GET or POST?

Compared to POST, GET is simpler and faster, and in most cases can be used.

However, use POST requests in the following situations:

When you don't want to use cached files (updating files or databases on the server)
Sending large amounts of data to the server (POST has no data limit)
When sending user input containing 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();

Try it »

In the example above, 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();

Try it »

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

Example

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

Try it »

POST Request

A simple POST request:

Example

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

Try it »

If you need to POST data like an HTML form, use setRequestHeader() to add HTTP headers. Then specify the data you wish 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");

Try it »

Method	Description
setRequestHeader(header,value)	Adds an HTTP header to the request. header: specifies the name of the header value: specifies the value of the header

url - File on Server

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

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

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

Async - True or False?

AJAX stands for Asynchronous JavaScript and XML.

If the XMLHttpRequest object is to be used for AJAX, the async parameter of its open() method must be set to true:

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

For web developers, sending asynchronous requests is a huge advancement. Many tasks executed on the server are time-consuming. Before AJAX appeared, this could cause the application to hang or stop.

Through AJAX, JavaScript doesn't need to wait for the server's response, but instead:

Executes other scripts while waiting for the server's response
Processes the response when it's ready

Async=true

When using async=true, specify the function to execute 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();

Try it »

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 don't recommend using async=false, but it can work for some small requests.

Remember that JavaScript will wait until the server response is ready before continuing execution. If the server is busy or slow, the application may hang or stop.

Note: When you use async=false, don't write an onreadystatechange function - just put the code after the send() statement:

Example

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

Try it »

YouTip