纯Js实现ajax菜鸟教程网_ajax基础知识教程

这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。1.创建对象,并兼容各种浏览器2.请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够,于是就写了第二个方法。至于怎么传递参数到服务器,我原来的做法是拼接在请求地址后面的。其实也可以XMLHttpReq.send(null);放在这里,就是null替换成参数,比如 user=b

纯Js实现ajax菜鸟教程网

这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。

纯Js实现ajax菜鸟教程网_ajax基础知识教程

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;

            }
      }
}
海计划公众号
(0)
上一篇 2020/03/30 16:07
下一篇 2020/03/30 16:07

您可能感兴趣的内容