Basic implementation of Ajax programming framework

We often implement it in object-oriented way in actual programming.
New static — > JS — > ajaxfk.js Add the following code to the JS file:

(()=>{
//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={
doAjaxGet:function(url,params,callback){
//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
        callback( xhr.responseText ）; // callback function
    }Else {// indicates that an exception has occurred
        callback(xhr.status);
        }
    }
}
//3. Establish a connection
xhr.open("GET",`${url}?${params}`,true);
//4. Send request
xhr.send(null);
},
doAjaxPost:function(url,params,callback){
//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
        callback( xhr.responseText ）; // callback function
    }Else {// indicates that an exception has occurred
        callback(xhr.status);
        }
    }
}
//3. Establish a connection
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/x-www.urlencoded");
//4. Send request
xhr.send(params);
    }
}
//3. Build Ajax object based on Ajax constructor, and assign the object to global variables
window.$$=new ajax();
}) () // arrow function

Modify HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 04 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>
The result < / span "> < span
</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>

Basic implementation of Ajax programming framework

Recommended Today

Can’t you tell a pile from a fool? This article tells you the best way to open heap in Java collection