关于前端: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;
 })
}