AJAX-快速上手（四个步骤）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

## 1， ajax

ajax是使用js进行在不重新加载页面的情况下，使得页面局部刷新。而传统的页面加载即需要，重新加载整个页面。它的加载是异步进行的，即在加载的同时，页面的其他部分可以正常使用，不会出现卡顿的情况。例如qq动态加载。

在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：

地址栏输入地址，回车，刷新
特定元素的 href 或 src 属性
表单提交

这些方案都是我们无法通过或者很难通过代码的方式进行编程（服务端发出请求。接受服务端返回的响应）

对于Form表单的提交，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，如果不幸由于网络太慢或者其他原因，就会得到一个404页面。（因为传统的http请求的实现得到的是一个页面的响应）。

## 2，ajax使用的四个

上述对应的time.php如下：：：

注意：respone：XMLHttpRequest()对象的响应 response 会根据 responseType 变化而变化。

responeText：返回的永远是一个响应体字符串。

**********************************************************************************************************************

###2，遵守HTTP

本质上 XMLHttpRequest 就是 JavaScript 在web 平台上发送http请求的一种媒介。所以发出去的依然是 HTTP 请求。同样符合http的数据格式。

可以通过代码编程修改请求头，请求体等等

设置 Content-Type: application/x-www-form-urlencoded后。请求体数据格式如下：

设置请求头后，请求头中多出如下：

##3，Ajax发送请求时的各个状态以及各状态对应请求和响应内容的关系。

###4, 额外知识点补充

1，同步模式下要注意事件的注册时机，send() 发送完成后，this.readyState 已经为 4 ，所以已经得到响应体 responseText，不需要 onreadystatechange事件触发了。

2，响应数据格式 json 和 XML 。分别获取 responseText 和 responseXML；

3，调试工具控制台 console.log() 时，变量数据会在点开时即时更新（对象，数组类型）

*************************************************************************************************************************

###5，Ajax 基本封装

    <script type="text/javascript">

       //封装的套路

       //1，写一个相对完善的用例

       //2，写一个空函数，没有形参，将刚刚的用例直接作为函数的函数体

       //3，根据使用过程中的需求抽象参数

        //version 4.0

       function ajax(method,url,params,callback) {

           var xhr = new XMLHttpRequest();

        if(typeof params === 'object') {

            var templ = [];

            for( var key in params) {

                var value = params[key];

                //往数组里面添加元素

                templ.push(key + '=' + value);

            }

            params = templ.join('&');

        }

           if(method == 'GET') {

               url +=  '?' + params;

           }

           xhr.open(method,url);

           var data = null;

           if (method == 'POST') {

               xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

               data = params;

           }

           xhr.send(data);

           xhr.onreadystatechange = function() {

             if (this.readyState == 4) {

                //1，不应该在封装函数中主观处理响应结果

                //2，无法在内部的函数通过 return 返回结果

                //3，由于异步模式下，代码执行会执行外面的 return 此时并没有得到结果。所以两个 return 也不行，响应结果都会是 undefined

                // var res = null;

                // res = this.responseText;

                console.log(this.readyState);//

                console.log(this.responseText);

                // return res;

                var result = this.responseText;

                callback(result);

             }

           }

           // console.log(xhr.readyState);//1

        // return  xhr.onreadystatechange();//undefined

       }

       // ajax('GET','time.php')

       // ajax('GET', 'time.php','id=1');

       // ajax('POST','time.php','key=value&key2=value2');

       ajax('POST','time.php',{"key":"value","ky1":"va"},function(result) {

           alert(result);

       } );

       // ajax('GET','time.php');

 </script>

服務端代碼：