纯Js实现ajax
这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。
1.创建对象,并兼容各种浏览器
2.请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够,于是就写了第二个方法。至于怎么传递参数到服务器,我原来的做法是拼接在请求地址后面的。其实也可以XMLHttpReq.send(null);放在这里,就是null替换成参数,比如 user=bill&pc=hw .
3.请求数据,成功后就会执行回调函数,回调函数里会收到服务器返回的数据,在回调函数里可以对数据进行处理,完成自己的要求。
1.创建对象
var XMLHttpReq;
var _XMLHttpReq;
function createXMLHttpRequest() {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP
}
catch (E) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP
}
catch (E) {
XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器,直接创建XMLHTTP对象
}
}
_XMLHttpReq=XMLHttpReq;
}向服务器进行请求,并执行调用回调函数,两种方法
//方法1 固定的回调处理 主要用在同步场景
function sendAjaxRequest(url,Sys) {
createXMLHttpRequest(); //创建XMLHttpRequest对象
XMLHttpReq.open("post", url, Sys);
XMLHttpReq.onreadystatechange = processResponse; //指定响应函数
XMLHttpReq.send(null);
}
//方法2 灵活的回调处理 同步异步皆可
function sendAjaxRequestFunc(url, Sys, func) {
createXMLHttpRequest(); //创建XMLHttpRequest对象
XMLHttpReq.open("post", url, Sys);
XMLHttpReq.onreadystatechange =func; //指定响应函数
XMLHttpReq.send(null);
}固定的回调
var _textReponse;
function processResponse() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
_textReponse = XMLHttpReq.responseText;
}
}
}//调用1 得到结果 _textReponse 在进行处理
sendAjaxRequest(‘xxx/xxx‘, false);
//调用2
sendAjaxRequestFunc(‘xx/xx‘, false, doSth);
function doSth(){
if (_XMLHttpReq.readyState == 4) {
if (_XMLHttpReq.status == 200) {
//得到结果进行处理
var data =_XMLHttpReq.responseText;
}
}
}本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!