Ajax advanced – extract commonality through constructor (ternary operator)

Time:2020-10-1
(()=>{
//1. Define a constructor
Var Ajax = function () {} // function expression (which can be understood as a constructor)
//2. Add Ajax function to prototype object inside constructor
ajax.prototype={
    doAjax:function(obj){//obj={type:"GET","url":url,"data":params,async:true,"ContentType":ContentType,"success":success,"error":error}
    //1. Create XHR object
    const xhr=new XMLHttpRequest();
    //2. Set status monitoring
    xhr.onreadystatechange=function(){
        If ( xhr.readyState==4 ){// the server response ends and the client receives successfully
        If ( xhr.status==200 ){// 200 indicates the end of normal response
            obj.success ( xhr.responseText ); // callback function
        }Else {// indicates that an exception has occurred
            obj.error(xhr.status);
        }
    }
}
    //3. Establish a connection
    let type=obj.type?obj.type:"GET";
    xhr.open(obj.type,obj.type=="GET"?`${obj.url}?${obj.data}`:obj.url,obj.async?true:obj.async);
    //4. Send request
    if(type!="GET"){
    xhr.setRequestHeader("Content-Type",obj.ContentType?obj.ContentType:"application/x-www-form-urlencoded");
    }
    xhr.send(obj.type=="GET"?null:obj.data);
    },
    doAjaxGet:function(url,params,callback){
    this.doAjax({"type":"GET","url":url,"data":params,"success":callback,"error":callback});
},
    doAjaxPost:function(url,params,callback){
    this.doAjax({"type":"POST","url":url,"data":params,"success":callback,"error":callback,"ContentType":"application/x-www-form-urlencoded"});
    }
}
    //3. Build Ajax object based on Ajax constructor, and assign the object to global variables
window.$$=new ajax();
})()

HTML file:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 05 Page</h1>
<fieldset>
< legend > Ajax form request
<form>
   <input type="text" id="nameId" name="name" onblur="doCheck()">
   <input type="button" onclick="doSave()" value="Save">
</form>
< span id = "ResultID" > < / span > <! -- this location displays the response result of the server -- >
</fieldset>
<script type="text/javascript"></script>
<script type="text/javascript">
   //Check if the name already exists
   function doCheck(){
       //1. Define the URL of the request
       var url="http://localhost/doCheck";
       //2. Define request parameters
       var name=document.forms[0].name.value;
       var params=`name=${name}`;
       //3. Send Ajax get request
      $$.doAjaxGet(url,params,(result)=>{
           document.getElementById("resultId").innerHTML=
               `<font color=red>${result}</font>`;
       });
   }
   //Save the value of the name in the form
   Function dosave() {// debugger, log, exclusion method
      //1. Request URL
      const url="http://localhost/doSave";
      //2. Request parameters
      let name=document.forms[0].name.value;
      let params=`name=${name}`;
      //3. Send Ajax post request
    $$.doAjaxPost(url,params,(result)=>{
            alert(result);
      })
   }
</script>
</body>
</html>