Ajax的使用及其封装

一、什么是Ajax

Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某某些数据进行更新。而不使用Ajax的页面如果需要更新内容，则必须重载整个网页页面。

二、Ajax的使用

知道了什么是Ajax，那么我们来创建一个Ajax：

//创建一个Ajax对象
var xhr = new XMLHttpRequest();

上面就是创建出的一个Ajax对象，我们就可以用这个xhr来发送Ajax请求了。

接下来是Ajax的请求信息的配置，Ajax请求信息配置使用open()方法来配置的。open()的参数有三个，第一个参数是本次信息的请求方式，一般有“GET”、“POST”、“PUT”等方式；第二个参数是本次请求的路径；第三个是本次请求是否异步，默认时true，表示异步，false表示同步。

//配置请求信息
xhr.open( "GET" , "./01_data.php" , true );

接下来就是信息的发送，使用send()方法来完成的。

//发送请求
xhr.send();

一个最基本的Ajax请求就是以上三个步骤，但是只有以上三个步骤我们是拿不到服务器返回给我们的响应。如果想要拿到响应，必须满足两个条件：本次HTTP请求是成功的，也就是HTTP的状态码为200-299之间HTTP状态码为xhr.status；另外，Ajax也有自己的状态码用来表示本次请求中的各个阶段。Ajax状态码为readyState

- readyState === 0：  表示未初始化完成，也就是open方法还没有执行

- readyState === 1：  表示配置信息已经完成，也就是执行完open之后

- readyState === 2：  表示send方法已经执行完成

- readyState === 3：  表示正在解析响应内容

- readyState === 4：  表示响应内容已经解析完毕，可以在客户端使用了

只有readyState为4的时候我们才能使用服务器给我们的响应数据。

在 Ajax 对象中有一个事件，叫做readyStateChang事件，这个事件是专门用来监听Ajax对象readyState值改变的的行，也就是说只要readyStat的值发生变化了，那么就会触发该事件，所以我们就在这个事件中来监听Ajax的 readyState是不是到4了。

Ajax中还有一个responseText，就是用来记录服务端给我们的响应体内容的，所以我们就用这个成员来获取响应体内容。

xhr.onreadyStateChange = function () {
  // 每次 readyState 改变的时候都会触发该事件
  // 我们就在这里判断 readyState 的值是不是到 4
  // 并且 http 的状态码是不是 200 ~ 299
  if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
    //如果请求成功，我们就可以获取服务端给我们响应的内容了
    // 我们在这里直接打印 xhr.responseText 来查看服务端给我们返回的内容
    console.log(xhr.responseText)      
  }
}

三、Ajax的封装

接下来我们就来封装一个Ajax函数以方便我们的使用

        //参数：请求的地址、请求类型、获取响应后需要执行的函数、需要传递的数据
        function getAjax( url , type , collback , data ){
            var xhr = "" ;
            //Ajax的兼容性处理
            if( typeof XMLHttpRequest === "function"){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if(type === "get"){
                //如果请求类型为get，将数据拼接到url上
                url =  toUrlData( data , url , type );
            }
            if(type === "post"){
                //如果请求方式为post，那么我们把数据拼接到data上;
                data =  toUrlData( data , url , type );
            }
            //配置请求信息
            xhr.open( type , url );
            //如果请求类型为post，还需要对请求头进行设置
            options.type === "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";
            //发送请求，如果请求类型为post，还需要添加请求需要发送的数据
            xhr.send( type=== "get" ? null : data );
            //
            xhr.onreadystatechange = function(){
                //如果请求成功
                if( xhr.readyState === 4 && /^2\d{2}$/.test (xhr.status ) ){
                    //执行传入的函数
                    typeof collback === "function" ? collback( xhr.responseText ) : "" ;
                }   
            }
        }

        //判断传入的参数是否为对象
        function isObject( obj ){
            return (typeof obj === "object" && obj !== null && obj.constructor && obj.constructor === Object);
        }
        //对请求地址和数据进行处理
        function toUrlData( url , data , type ){
            if( isObject( data ) ){
                var str = "";
                //将对象数据拼接在一个字符串之中，每条数据之间用 & 连接
                for(var attr in data ){
                    str += "&" + attr + "=" + data[attr]
                }
                //除去第一个&
                str = str.slice(1);
                // 如果数据发送方式是POST，那么直接返回str就可以了;
                if( type.toUpperCase() === "POST"){
                    return str;
                }
                //将地址和数据连接，中间用 ? 连接
                url += "?" + str;
                return url;
            }
            return url;
        }

以上就是对Ajax的封装，如有错误，敬请指正。