关于前端:Ajax底层的基本实现

根本步骤

• 创立XHR对象
• 设置状态监听
• 建设与服务器端的连贯
• 发送申请

最后代码

function doAjaxGet(){
 //1,创立XHR对象（此对象是Ajax技术利用的入口对象，发送异步申请，解决响应后果都是通过此对象实现）
 var xhr = new XMLHttpRequest();
 //2，设置状态监听
 xhr.onreadystatechange=function(){//事件监听函数（解决客户端与服务器通过过程中产生的数据）
 /**readyState的值0,1,2,3,4
 * 0.示意还未执行open办法
 * 1.示意执行open办法但还未执行send办法
 * 2.示意已执行send办法
 * 3.示意客户端正在接管服务端响应的数据
 * 4.示意客户端曾经实现响应数据的接管
 */
 if(xhr.readyState==4&&xhr.status==200){
            var result = xhr.responseText;//获取服务器端响应文本数据
 document.getElementById("resultId").innerHTML=result;
 }
     }
    //3，建设与服务器端的连贯
 xhr.open("GET","doAjaxGet",true);//true示意异步申请，false示意同步，申请会在main线程发送
 //4,发送申请
 xhr.send(null);//将申请交给ajax引擎
 console.log("do other .....");
}

提取代码共同点进行初步封装

function doAjaxPost(url,params,callback){
    let xhr = new XMLHttpRequest();
 xhr.onreadystatechange=function (){
        if(xhr.readyState==4&&xhr.status==200){
            callback(xhr.responseText);
 }
    }
    xhr.open("POST",`${url}?${params}`,true);
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xhr.send(`name=${name}`);
}
function doSave(){
    let name = document.forms[0].name.value;//获取表单中name对应的value属性值
 let url = "/doSave";
 let params = `name=${name}`;
 doAjaxPost(url,params,function (result){
       document.getElementById("result").innerHTML=result;
 })
}