2-1传统的请求方式

传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器接受到用户的请求然后响应。在这段时间内，用户会傻乎乎 的盯着一个空白页面看。这是因为以往的传输方式为同步处理方式。长久以来我们对这种web交互模式已经习惯了，并且以使用者的角度来讲已经觉得是理所当然的事情了。

Ajax的工作方式

和传统的web应用不同，Ajax采取了异步交互避免了用户请求-等待-应答交互方式的缺点。 Ajax在应用程序和服务器中引入了一个中间层---Ajax引擎，它是用Javascript编写的，在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面， 以及代表用户和服务器进行交互。Ajax引擎允许用户和服务器进行异步的交互。用户无需傻乎乎的盯着空白页面。

2-2回调函数的理解

字面上的理解，回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。顾名思义，回调，就是回头调用的意思。主函数的事先干完，回头再调用传进来的那个函数。
举一个别人举过的例子：约会结束后你送你女朋友回家，离别时，你肯定会说：“到家了给我发条信息，我很担心你。” 对不，然后你女朋友回家以后还真给你发了条信息。小伙子，你有戏了。其实这就是一个回调的过程。你留了个参数函数（要求女朋友给你发条信息）给你女朋友，然后你女朋友回家，回家的动作是主函数。她必须先回到家以后，主函数执行完了，再执行传进去的函数，然后你就收到一条信息了。

                    //定义主函数，回调函数作为参数
                    function A(callback) {
                    callback();
                    console.log('我是主函数');
                    }
                    //定义回调函数
                    function B(){
                    setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作
                    }
                    //调用主函数，将函数B传进去
                    A(B);
                    //输出结果
                    我是主函数
                    我是回调函数
                    

第三个问题： Ajax乱码问题
乱码问题虽然我们目前遇到的不多，但是也属于比较常见的一个问题了。出现的主要原因就是编码不一致导致的。 如果出现乱码问题了，首先检查一下meta声明的charset要和请求的页面返回的charset一致。response.charset="gb2312 or utf-8"

第四个问题：Ajax对象属性的大小写问题，有些浏览器比如火狐，对大小写是敏感的，if (xhr.readystate==4)这种写法， 在IE下是成立的，但是在ff下就行不通了，因为IE不区分大小写，ff是区分大小的。标准写法为if (xhr.readyState==4)，同理还有属性 responseText，responseXML。习惯采用驼峰形式的写法可以避免这个问题。
第五个问题：Ajax状态0的问题，有时候在测试Ajax代码的时候加了 xhr.status==200的判断后，一直不执行xhr.status==200的代码， 这个就需要注意了。xhr.status==200是要通过服务器确认后来返回的，在服务器页面没有发生错误或者转向时才返回200状态的， 此状态和你通过浏览器访问页面时服务器定义的状态一致。这个我们提前就跟后端对接好了，问题也不大。

                
               $.ajax({
                    url:"student-ajax/student",
                    type:"POST",
                    dataType:"json",
                    data:{
                        name:$("#names").val(),
                        qq:$("#QQs").val(),
                    },
                    success:function(data){
                        console.log(data);
                        if(data.code === 200){
                            alert($("#names").val() + "学员信息" +data.message);
                        }else{
                            alert(data.message);
                        }
                    },
                    error:function(data){
                        console.log(data);
                        alert("添加失败");
                    }
                });
            }) ;

                    
            

                
                $http({
                method:'get',
                url:('/a/a/all/document?type=1&page='+$scope.page),
                headers:{'Content-Type':'application/x-www-form-urlencoded'}
            })
                .success(function (response) {
                    // console.log(12345);
                    console.log(response.total);
                    console.log(response);
                    console.log(aaa);
                    // if (response.message === "查询成功") {
                     $scope.userList = response.data;
                     $scope.userTotal = response.total;
                    $scope.page=response.page;
                    // console.log($scope.userList.total);
                });

                
            

                
                  var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象;
                  request.onreadystatechange = function () { // 状态发生变化时，函数被回调;
                      if (request.readyState === 4) { // 成功完成
                          // 判断响应结果:
                          if (request.status === 200) {
                              // 成功，通过responseText拿到响应的文本:
                              return success(request.responseText);
                          } else {
                              // 失败，根据响应码判断失败原因:
                              return fail(request.status);
                          }
                      } else {
                          // HTTP请求还在继续...
                      }
                  }

                  // 发送请求:
                  request.open("POST","/skill-ajax/a/login",true);
                  request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                  request.send();
                  alert('请求已发送，请等待响应...');

                // readyState值说明
                // 0,初始化,XHR对象已经创建,还未执行open
                // 1,载入,已经调用open方法,但是还没发送请求
                // 2,载入完成,请求已经发送完成
                // 3,交互,可以接收到部分数据

                // status值说明
                // 200:成功
                // 404:没有发现文件、查询或URl
                // 500:服务器产生内部错误


                
            

(1) 在使用xhr对象发送请求和处理请求响应之前，必须先用js语言创建一个xhr对象。由于xhr对象当前还不是w3c标准，所以才有多种方式进行创建以解决兼容性问题。具体创建方式如下：

                   var xmlhttp;
                    if (window.XMLHttpRequest)
                      {// code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                      }
                    else
                      {// code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }