Home » AJAX

AJAX XML http

AJAX XML http: In this tutorial, we are going to learn about the AJAX XML http i.e. XMLHttpRequest with examples.
Submitted by Siddhant Verma, November 22, 2019

AJAX stands for asynchronous JavaScript and XML. It's a modern way to structure and build web applications using the built-in AJAX engine inside the browser. One of the key features of AJAX is the XMLHttpRequest object through which we can do a whole bunch of cool stuff with respect to interacting with a third party application or an API.

Using the XMLHttpRequest object we can update the content dynamically on the web page.

Let's see how we can create an XMLHttpRequest object?

var xhttp = new XMLHttpRequest();
console.log(xhttp);

Output

XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}

As you can see this object has loads of methods and properties available for use. Let's first look at some common properties,

1. readyState:
   This property defines the current state of our object. This state can take certain values based on our interaction with the URL and based on those values we can determine what to do next.
   For example, a value of 0 indicates that the request has not been initialized yet. A value of 1 indicates the request is set up but not sent just yet. A value of 2 tells you that your request has been sent. In case the request is still in the process of being sent over, it gets a value of 3 and finally on successful completion of the request the readyState takes a value of 4. We'll see these in detail when we look at the methods.
2. onreadystatechange:
   Since the readyState takes 4 values, these values are in the order in which the request gets processed. At least we can logically assume so. When these values change, this event is triggered and we can use this to fire a function. This tells us that ok, go ahead and make some request for some data.
3. responseText:
   This is the string that is returned as the response from the request.
4. responseXML:
   This returns the response in XML data format.
5. status:
   This property attaches the status returned after the request is made like 400, 404, etc that you often see on web sites.
6. statusText:
   This attaches the status string returned like Not found, OK associated with a certain status code.

Now let's look at the most commonly used methods available,

1. abort():
   This method cancels or aborts the request as the name suggests.
2. open():
   This method specifies the request that is to be sent and ahs 4 parameters: the type of request like GET, PUT, POST, etc, the endpoint or URL at which we're hitting or making the request, a boolean indicating whether the request should be handled synchronously or asynchronously and an optional username and password.
3. send():
   Used for the request content. We can directly use send() for sending GET requests and pass in a string as a parameter to send a POST request.

---