Notes about ajax request

Create XMLHttpRequest object

XMLHttpRequest is basic of Ajax request,

const xhr = new XMLHttpRequest();

Send a request to the server

xmlhttp.open("GET", "url"); // url is the api endpoint
xml.send();

onreadystatechange

There are 5 state of xmlhttprequest, from 0 to 4

0. Request not initialized
1. Server connection is established
2. Request has been received
3. Request is being processed
4. Request completed and response is ready

Hence, When readyState is equal to 4 and the status is 200, the response is ready.

xml.onreadystatechange=function() {
    if(xml.readyState==4 && xml.status==200) {
        document.getElementById("myDiv").innerHTML=xml.responseText;
    }
}

Ajax json examples

function loadXMLDoc(){
    // init a xmlhttprequest
    const xmlhttp = new XMLHttpRequest();

    // init a onreadystatechange and parse xml to json 
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr)
        }
    }
    //send the xml request
    xmlhttp.open("GET","/try/ajax/json_ajax.json",true);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xmlhttp.send();
}
// function to change the dom
function myFunction(arr) {
  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + 
    arr[i].title + '</a><br>';
  }
 document.getElementById("myDiv").innerHTML=out;
}

Ajax with Promise examples

const p = new Promise((resolve, reject)=>{
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4){
            if (xmlhttp.status==200)
            {
                //success
                resolve(this.responseText)
            }else{
                //fail
                reject(xmlhttp.status)
            }
        }
    }
})

//promise followup
const result = p.then(function(value){
    let myArr = JSON.parse(value)
    myFunction(myArr)
    return myArr
},function(reason){
    console.log(reason)
    return 'error'
})

// function to change the dom
function myFunction(arr) {
  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + 
    arr[i].title + '</a><br>';
  }
 document.getElementById("myDiv").innerHTML=out;
}