ajax详解

Posted 2020-08-01 JcScript

AJAX即“Asynchronous Javascript And XML”（异步javascript和XML），是指一种创建交互式网页应用的网页开发技术（异步加载）。

XMLHttpRequest 对象：

open():简历到服务器的新请求。

send():向服务器发送请求。

abort():退出当前请求。

readyState:提供当前html的就绪状态。

status:响应的HTTP状态。

responseText：服务器返回的请求响应文本。

reponseXML:服务器反应的请求响应的XML。

其实ajax的核心业务逻辑特别简单，首先new一个XMLHttpRequest(如果是兼容ie就用ActiveXObject)，然后调用open()和send()方法,open表示建立链接，send表示发送.之后判断你发送的请求到什么状态也就是调用onreadystatechange,然后判断xmlHttp.readyState == 4 && xmlHttp.status == 200(4表示完成，200表示成功)则调用responseText取得返回结果即可。

readyState可能返回的值：

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

 1         if (window.ActiveXObject) { 
 2             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
 3         } else if (window.XMLHttpRequest) { 
 4             xmlHttp=new XMLHttpRequest(); 
 5         } 
 6         xmlHttp.open("get",‘t_user/get_all_info‘,true); 
 7         xmlHttp.send();
 8         xmlHttp.onreadystatechange = function(data) { 
 9             if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) 
10             {
11                 console.log(xmlHttp.responseText);
12             } 
13         }     

上面代码就是基本的ajax原理，不过不同的请求方式我们的代码也有微微带动。

get：

1         xmlHttp.open("get",‘t_user/get_all_info?name=admin‘，true); 
2         xmlHttp.send();

post:

1         xmlHttp.open("post",‘t_user/get_all_info‘,true); 
2         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3         xmlHttp.send(‘name=admin‘);

你一定观察到了，没错post方式比get方式多的setRequestHeader方法，这个方法可以理解成一个配置文件，如果没有这行代码，后台post方式是取不到name的。

ajax一般用来链接后台接口实现前端页面和后台的数据交互，非常的好用。但是AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.并且AJAX只是局部刷新,所以页面的后退按钮是没有用的.

学会了ajax的基本原理我们也可以自己封装一个ajax的函数来实现交互：

       function ajax(query){
            var xmlHttp;
            var strData=‘‘;
            var init = {
                type : "get",
                dataType:"text",
            };
            (function(i,q){
                for(var p in q){
                    i[p] = q[p];
                }
                console.log(init);
            })(init,query);
            
            for(var p in init.data){
                strData += p + ‘=‘ + init.data[p] + ‘&‘;
            }
            
            console.log(strData);
            if (window.XMLHttpRequest) { 
                xmlHttp=new XMLHttpRequest(); 
            } else if (window.ActiveXObject) { 
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
            } 
            
            if(init.type.toUpperCase()==‘GET‘){
                var url = init.url+‘?‘+strData;
                xmlHttp.open(init.type, url, true);
                xmlHttp.send();
            }else if(init.type.toUpperCase()==‘POST‘){
                xmlHttp.open("post",init.url,true); 
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xmlHttp.send(strData);
            }
            xmlHttp.onreadystatechange = function() { 
                if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) 
                {
                    var returnData;
                    if(init.dataType == ‘text‘){
                        returnData = xmlHttp.responseText;
                    }else if(init.dataType == ‘json‘){
                        returnData = JSON.parse(xmlHttp.responseText);
                    }else if(init.dataType == ‘xml‘){
                        returnData = xmlHttp.responseXML;
                    }
                    init.success && init.success(returnData);
                } 
            } 
            
        }

上述代码中运用到了函数立即调用和对象合并的概念，代码如下：

           (function(i,q){
                for(var p in q){
                    i[p] = q[p];
                }
                console.log(init);
            })(init,query);

其目的是为了实现传入函数的初始化。剩下的无非是一些判断来根据不同的情况来使用不同的语法。

例如：

                    var returnData;
                    if(init.dataType == ‘text‘){
                        returnData = xmlHttp.responseText;
                    }else if(init.dataType == ‘json‘){
                        returnData = JSON.parse(xmlHttp.responseText);
                    }else if(init.dataType == ‘xml‘){
                        returnData = xmlHttp.responseXML;
                    }
                    init.success && init.success(returnData);

这段代码就是为了根据传入不同的dataType来决定不同的返回类型。是不是看起来特别简单呢？我猜测jquery的底层代码核心业务逻辑也就不过如此了（虽然没去读过jquery底层代码- -），只不过jquery的代码比我这个代码要健壮的多得多的多。

AJAX(Jquery)：

jquery中封装的ajax有三种方法：

$.get();

$.post();

   $.post("test.php", { name: "zhang"},
      function(data){
        alert("Data Loaded: " + data);
   },‘text‘);

$.ajax();

                  $.ajax({
                    url: ‘t_user/regist_account‘,
                    type: ‘post‘,
                    data: {
                        name:admin
                    },
                    dataType: ‘text‘
                  }).done(function (date) {
                          console.log(date);
                        if(date ==‘success‘){
                            alert(‘succcess‘);
                        }else if(date == ‘fail‘){
                           　alert(‘fail‘);
                        }
                　 });

上面的代码来看jquery封装的ajax还是非常方便的，我们只需要给定需要请求的路径，方式，数据，返回类型等就会得到后台预期的数据，function里面的date(形参)就是后台返回的数据，数据类型决定于你传的dataType参数。

前端技术有不少前端框架，当然也封装了不少ajax的方法，下面我们来看angularJS中ajax的用法：

myModule.controller(‘aa‘,[‘$scope‘,‘$http‘,function(s,h){
            s.stu = {
                user:"",
                pwd:""
            };
            s.login = function(){
                console.log(s.stu.user);
                if(s.stu.user==""||s.stu.pwd==""){
                    alert("账号或密码不能为空！！！");
                }else{
                    h({
                    method:‘post‘,
                    url:‘t_user/login_on‘,
                    data:{
                        "name":s.stu.user,
                        "pwd" :s.stu.pwd
                    },
                    //配置文件----请勿改动start
//                    headers:{‘Content-Type‘: ‘application/x-www-form-urlencoded‘},  
//                       transformRequest: function(obj) {  
//                         var str = [];  
//                         for(var p in obj){  
//                           str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));  
//                         }  
//                         return str.join("&");  
//                       }  
                       //配置文件----请勿改动start
                    }).success(function(data){
                        console.log(data.is_teacher);
                        if(data!=‘fail‘){
                            alert(‘登录成功！！！‘);
                            if(data.is_teacher==2){
                                window.location.href = ‘t_user/href_tea‘;
                            }else if(data.is_teacher==1){
                                window.location.href = ‘t_user/href_tea‘;
                            }else if(data.is_teacher==0){
                                window.location.href = ‘t_user/href_stu‘;
                            }
                            
                        }else{
                            alert(‘账号或密码错误，请从新输入！！！‘);
                        }
                    }).error(function(data){
                        console.log(data);
//                        alert(‘请正确输入！！！‘);
                    });
                }
            };
        }]);

我们在一个为aa的controller写一个ajax请求。angular的服务器交互需要一个$http服务。angularJS中的$http服务将send方法进行了简单的封装，打包成一个服务模块的形式提供开发者。调用后返回一个对象有两个回调方法success，error。success内接收成功后操作，error中接收错误时的操作。使用方法和Jquery封装的方法基本相似。

最后:谢谢大家看到这里，如果我上述有错误请一定留言指正，希望大家技术一起进步!