The XMLHttpRequest object is used to send requests for data from a server.
To send a request to a server, we utilize the open() and send() methods of the XMLHttpRequest object.
| xhttp.open(“GET”, “ajax_info.txt”, true); xhttp.send(); |
|
Method |
Description |
|
open(method, url, async) |
Defines the request type:
|
|
send() |
Sends the request to the server (typically used for GET). |
|
send(string) |
Sends the request to the server (typically used for POST). |
The url parameter of the open() method is the address of a file located on a server.
| xhttp.open(“GET”, “ajax_test.asp”, true); |
The file can be any type, such as .txt or .xml, or server-side script files like .asp and .php, which can perform server-side actions before sending the response.
Server requests should be sent asynchronously, so the async parameter of the open() method should be set to true.
| xhttp.open(“GET”, “ajax_test.asp”, true); |
When requests are sent asynchronously, JavaScript doesn’t need to wait for the server’s response. Instead, it can:
|
The default value for the async parameter is async = true. You can safely remove the third parameter from your code. Synchronous XMLHttpRequest (async = false) is not recommended because the JavaScript will stop executing until the server response is ready. If the server is busy or slow, the application will hang or stop. |
GET is simpler and faster than POST and is suitable for most cases. However, POST should be used when:
A basic GET request:
| xhttp.open(“GET”, “demo_get.asp”); xhttp.send(); |
In the example above, you might receive a cached result. To prevent this, append a unique ID to the URL.
| xhttp.open(“GET”, “demo_get.asp?t=” + Math.random()); xhttp.send(); |
To send information with the GET method, append the data to the URL.
| xhttp.open(“GET”, “demo_get2.asp?fname=Henry&lname=Ford”); xhttp.send(); |
The way the server processes the input and responds to a request will be explained in a later chapter.
A basic POST request:
| xhttp.open(“POST”, “demo_post.asp”); xhttp.send(); |
To POST data like an HTML form, use setRequestHeader() to add an HTTP header, and specify the data to send in the send() method.
| xhttp.open(“POST”, “ajax_test.asp”); xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); xhttp.send(“fname=Henry&lname=Ford”); |
|
Method |
Description |
|
setRequestHeader(header, value) |
Adds HTTP headers to the request:
|
To make a synchronous request, set the third parameter in the open() method to false.
| xhttp.open(“GET”, “ajax_info.txt”, false); |
Sometimes, async = false is used for quick testing, and synchronous requests can also be found in older JavaScript code. Since the code waits for the server to finish, there is no need for an onreadystatechange function.
| xhttp.open(“GET”, “ajax_info.txt”, false); xhttp.send(); document.getElementById(“demo”).innerHTML = xhttp.responseText; |
|
Synchronous XMLHttpRequest (with async = false) is not recommended because JavaScript execution will pause until the server responds. If the server is slow or busy, the application may freeze or become unresponsive.
Modern developer tools now warn against using synchronous requests and may throw an InvalidAccessError exception when they’re used. |