AJAX (Asynchronous JavaScript and XML) is a technique used in web development to create dynamic and interactive web pages. It allows web pages to update content without reloading the entire page, resulting in a faster and more responsive user experience. One of the key components of AJAX is the XMLHttp request object, which is used to send and receive data between the web page and the server.
The XMLHttp request object is a JavaScript object that was introduced in Internet Explorer 5.0 and later adopted by other browsers. It allows the web page to make HTTP requests to the server and receive responses without reloading the entire page. This is achieved by sending requests asynchronously, which means that the web page can continue to function while waiting for the server to respond.
The XMLHttp request object has several methods and properties that can be used to customize the request and handle the response. The most commonly used methods are:
open(method, url, async): creates a new request and specifies the HTTP method, URL, and whether the request should be asynchronous or not.send(data): sends the request to the server and optionally sends data along with the request.abort(): aborts the current request.The most commonly used properties are:
readyState: indicates the current state of the request (0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete).status: indicates the HTTP status code of the response (e.g. 200 for success, 404 for not found).responseText: contains the response data as a string.responseXML: contains the response data as an XML document.Here is an example of how to use the XMLHttp request object to send a GET request to a server and handle the response:
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "https://example.com/api/data", true);
xhttp.send();
</script>
In this example, a new XMLHttp request object is created and assigned to the variable xhttp. The onreadystatechange event handler is set to a function that checks if the request is complete and successful (i.e. readyState is 4 and status is 200). If the request is successful, the response data is assigned to the innerHTML property of an HTML element with the ID "demo". The open method is used to specify the HTTP method ("GET"), URL ("https://example.com/api/data"), and asynchronous flag (true). Finally, the send method is called to send the request to the server.
The XMLHttp request object can also be used to send POST requests, which allow data to be sent to the server in the request body. Here is an example of how to use the XMLHttp request object to send a POST request to a server and handle the response:
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "https://example.com/api/data", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=John&age=30");
</script>
In this example, the setRequestHeader method is used to set the "Content-type" header to "application/x-www-form-urlencoded", which is the default content type for HTML forms. The send method is called with a string that contains the data to be sent in the request body. The data is formatted as key-value pairs separated by ampersands.
The XMLHttp request object is a powerful tool for creating dynamic and interactive web pages. It allows web pages to communicate with servers without reloading the entire page, resulting in a faster and more responsive user experience. By using the methods and properties of the XMLHttp request object, web developers can create sophisticated web applications that provide a rich and engaging user experience.