Native AJAX Basics

AJAX = Asynchronous JavaScript And XML.
Early IE browsers used ActiveX not XMLHttpRequest to create requests
so to make your code stronger
if (window.XMLHttpRequest) {
    // code for modern browsers
    xmlhttp = new XMLHttpRequest();
 } else {
    // code for old IE browsers
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
This code needs to add the method list of


this object
Method                  Description
new XMLHttpRequest()        Creates a new XMLHttpRequest object
abort()                     Cancels the current request
getAllResponseHeaders()     Returns header information
getResponseHeader()        Returns specific header information (returns the specified header content)
open(method, url, async, user, psw)     Specifies the request (specifies request parameters)
                          method: the request type GET or POST (get or post request)
                          url : the file location (path)
                          async: true (asynchronous) or false (synchronous) (synchronous or asynchronous, true: asynchronous. false: synchronous)
                          user: optional user name (user name when there is a login requirement)
                          psw: optional password( User password)
send()            Sends the request to the server, Used for GET requests (used for GET requests)
send(string)        Sends the request to the server, Used for POST requests (used for POST requests)
setRequestHeader()    Adds a label/value pair to the header to be sent


Property                        Description
onreadystatechange        Defines a function to be called when the readyState property changes (defines a method to trigger when the state changes)
readyState                 Holds the status of the XMLHttpRequest. (list of status values)
                                    0: request not initialized
                                    1: server connection established
                                    2: request received
                                    3: processing request ask)
                                    4: request finished and response is ready (the request is over, the response is being returned)
responseText              Returns the response data as a string (result of the response, in the form of a string)
responseXML                Returns the response data as XML data (the result of the response, in the form of xml)
status                    Returns the status-number of a request
                                  200: "OK"()
                                  403: "Forbidden"()
                                  404: "Not Found"()
                                  For a complete list go to the Http Messages Reference()
statusText                 Returns the status-text (eg "OK" or "Not Found" ) (status value text)


basic application example

The url is the address requested by the server, and the method GET triggered after the myFunction method requests ok :
function loadTxt(url, myFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState = = 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
POST:
function loadDoc(url, cFunction) {
    var xhttp;
    xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
      }
    };
    xhttp.open("POST", url, true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//Cannot be less
    xhttp.send("id=26") ;//The string "name=xxx&pwd=xxx" uses & splicing
  }
At present, this application should be less, mainly because jquery is packaged very well now. Convenient when using $.ajax directly. As a little expansion of your own knowledge,


reference : https://www.w3schools.com/js/js_ajax_intro.asp