Ajax is an asynchronous JavaScript and XML mechanism for updating a portion of a page. It allows you to update a portion of the page after receiving data from the server, avoiding the need to refresh the entire page.

Furthermore, by integrating partial page refreshes in this manner, we not only provide an excellent user experience but also reduce the server burden.

A simple Ajax request

1var xmlhttp = new XMLHttpRequest();
2xmlhttp.open('GET', 'send-ajax-request-url');
3xmlhttp.send(null);

In this case, we first create an instance of a class that can send HTTP requests to the server. Then invoke its open method, passing the HTTP request method as the first parameter and the URL of the request page as the second. Finally, we invoke the send method with no parameters. If you use the POST request method, the send method parameters should contain any data you want to send.

Here’s how we handle the server’s response

1xmlhttp.onreadystatechange = function () {
2  if (xmlhttp.readyState !== 4) return;
3  if (xmlhttp.status === 200) {
4    console.log('Request Response', xmlhttp.responseText);
5  } else {
6    console.log('HTTP error', xmlhttp.status, xmlhttp.statusText);
7  }
8};

Because onreadystatechange is asynchronous, it can be called at any time. This is known as a “callback function”, and it is called once the client starts sending a request.

Many people rely on jQuery because of the Ajax method’s convenience. But JavaScript’s native Ajax API is also very powerful and has similar basic functionality across browsers, allowing you to completely encapsulate an Ajax object.

An example of a POST Ajax Request

 1var xmlhttp;
 2if (window.XMLHttpRequest) {
 3  xmlhttp = new XMLHttpRequest();
 4} else {
 5  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
 6}
 7xmlhttp.open('POST', 'send-ajax-request-url', true);
 8
 9// set content type according to your data type
10xmlhttp.setRequestHeader('Content-Type', 'application/json');
11xmlhttp.setRequestHeader('cache-control', 'no-cache');
12
13// if data type is json use JSON stringify
14xmlhttp.send(JSON.stringify(data));
15
16//set request timeout to handle any network error
17xmlhttp.timeout = 5000;
18xmlhttp.ontimeout = function () {
19  console.log('Request Timeout', xmlhttp.responseURL);
20};
21
22xmlhttp.onreadystatechange = function () {
23  if (xmlhttp.readyState !== 4) return;
24  if (xmlhttp.status === 200) {
25    let response = '';
26    try {
27      response = JSON.parse(xmlhttp.responseText);
28    } catch (e) {
29      response = xmlhttp.responseText;
30    }
31    console.log('API Response', response);
32  } else {
33    console.log('HTTP error', xmlhttp.status, xmlhttp.statusText);
34  }
35};

An example of a GET Ajax Request

 1var xmlhttp;
 2if (window.XMLHttpRequest) {
 3  xmlhttp = new XMLHttpRequest();
 4} else {
 5  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
 6}
 7xmlhttp.open('GET', 'send-ajax-request-url', true);
 8
 9xmlhttp.setRequestHeader('cache-control', 'no-cache');
10xmlhttp.send();
11
12xmlhttp.onreadystatechange = function () {
13  if (xmlhttp.readyState !== 4) return;
14  if (xmlhttp.status == 200) {
15    let response;
16    try {
17      response = JSON.parse(xmlhttp.responseText);
18    } catch (e) {
19      response = xmlhttp.responseText;
20    }
21    console.log('Request Response', response);
22  } else {
23    console.log('HTTP error', xmlhttp.status, xmlhttp.statusText);
24  }
25};

This article primarily introduces examples to explain the method of using native JavaScript to process AJAX requests, so that friends who require it can refer to this article if the native API is used instead of the Ajax method in jQuery.