AJAX - XMLHttpRequest

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() Method:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Method Description
open(method, url, async)

Specifies the type of request

  • method:Request type: GET or POST
  • url:Server (file) location
  • async:true (asynchronous) or false (synchronous)
send() Sending a request to the server (used for GET)
send(string) Sending a request to the server (used for POST)

GET or POST?

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

However, always use POST in the following situations:

  • Cache files are not an option (update files or databases on the server)
  • Sending a large amount of data to the server (POST has no size limit)
  • Sending user input (can include unknown characters), POST is more powerful and secure than GET

GET request

A simple GET request:

Example

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Try It Yourself

In the above example, you might get a cached result. To avoid this, please add a unique ID to the URL:

Example

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Try It Yourself

If you need to send information using the GET method, please add this information to the URL:

Example

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Try It Yourself

POST request

A simple POST request:

Example

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Try It Yourself

If you need to POST data like an HTML form, please use setRequestHeader() Add an HTTP header. Please use send() The method specifies the data you need to send:

Example

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Try It Yourself

Method Description
setRequestHeader(header, value)

Add HTTP headers to the request

  • header：Specify the header name
  • value：Specify the header value

url - The file on the server

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

xhttp.open("GET", "ajax_test.asp", true);

The file can be any type of file, such as .txt and .xml, or server script files such as .asp and .php (they can perform operations on the server before sending back the response).

Asynchronous - true or false?

If you need to send the request asynchronously,open() method async The parameter must be set to true:

xhttp.open("GET", "ajax_test.asp", true);

Sending asynchronous requests is a huge progress for web developers. Many tasks executed on the server are very time-consuming. Before AJAX, this operation could cause the application to hang or stop.

By sending asynchronously, JavaScript does not have to wait for the server response, but can:

  • Execute other scripts while waiting for the server response
  • Handle the response when the response is ready

onreadystatechange property

Through the XMLHttpRequest object, you can define a function to be executed when the request receives a response.

This function is in the XMLHttpResponse object's onreadystatechange defined in the property:

Example

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Try It Yourself

You will learn more about onreadystatechange in the following chapters.

Synchronous request

If you need to execute a synchronous request, please set open() The third parameter in the method is set to false:

xhttp.open("GET", "ajax_info.txt", false);

Sometimes async = false is used for quick testing. You will also see synchronous requests in older JavaScript code.

Since the code will wait for the server to complete, there is no need for the onreadystatechange function:

Example

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Try It Yourself

We do not recommend synchronous XMLHttpRequest (async = false) because JavaScript will stop executing until the server response is ready. If the server is busy or slow, the application may hang or stop.

Synchronous XMLHttpRequest is being removed from the Web standard, but this process may take many years.

Modern development tools are encouraged to issue warnings for synchronous requests, and an InvalidAccessError exception may be thrown when this situation occurs.