AJAX - XMLHttpRequest
The XMLHttpRequest object is essential for making requests to a server.
Sending a Request to a Server
To send a request to a server, use the open() and send() methods of the XMLHttpRequest object:
xhttp.open("GET", "ajax_info.txt", true);xhttp.send();
Method Descriptions
Method
Description
open(method, url, async)
Specifies the type of request
send()
Sends the request to the server (used for GET)
send(string)
Sends the request to the server (used for POST)
The URL - A File on a Server
The url parameter in the open() method is the address of a file on the server:
xhttp.open("GET", "ajax_test.asp", true);
This file can be of any type, such as .txt, .xml, or server-side scripts like .asp or .php.
Asynchronous Requests
Server requests should be sent asynchronously. Set the async parameter of the open() method to true:
xhttp.open("GET", "ajax_test.asp", true);
By sending requests asynchronously, JavaScript can:
- Execute other scripts while waiting for the server response
- Handle the response once it is ready
The default value for the async parameter is true, so it can be omitted.
Note: Synchronous requests (async = false) are not recommended because JavaScript execution will halt until the server responds, causing the application to hang if the server is slow or busy.
GET vs. POST Requests
GET is simpler and faster than POST and is suitable for most cases. However, use POST when:
- Avoiding cached files (updating a file or database on the server)
- Sending large amounts of data (POST has no size limitations)
- Sending user input containing unknown characters (POST is more secure and robust than GET)
GET Requests
A simple GET request:
xhttp.open("GET", "demo_get.asp");xhttp.send();
To avoid cached results, add a unique ID to the URL:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());xhttp.send();
To send information with the GET method, add it to the URL:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");xhttp.send();
POST Requests
A simple POST request:
xhttp.open("POST", "demo_post.asp");xhttp.send();
To send data like an HTML form, add an HTTP header with setRequestHeader() and specify the data 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
Method
Description
setRequestHeader(header, value)
Adds HTTP headers to the request
Synchronous Requests
To execute a synchronous request, set the third parameter in the open() method to false:
xhttp.open("GET", "ajax_info.txt", false);xhttp.send();document.getElementById("demo").innerHTML = xhttp.responseText;
Synchronous requests (async = false) are not recommended as they halt JavaScript execution until the server responds. This can cause the application to hang if the server is busy or slow. Modern developer tools often warn against using synchronous requests and may throw an InvalidAccessError exception.
Complete Example
!DOCTYPE html>
<html><body><div id="demo"> <h2>Let AJAX change this text</h2> <button type="button" onclick="loadDoc()">
Change Content</button></div><script>function loadDoc() { const xhttp = new XMLHttpRequest(); xhttp.onload = function() { document.getElementById("demo").innerHTML = this.responseText; } xhttp.open("GET", "ajax_info.txt", true); xhttp.send();}</script></body></html>
This example demonstrates how to use the XMLHttpRequest object to update a part of a web page without reloading the entire page.
