ajax与ajax封装

---

前言

今天我们来学习ajax以及为什么要封装Ajax，又该如何封装Ajax。

一、Ajax

在传统的网页中，如果需要更新内容，则必须重新加载整个页面，很显然，为了更新一些内容而重新加载整个网页面的做法很消耗计算机资源和影响使用体验，为了解决整个弊端，Ajax应运而生。
ajax是一个用于创建更好更快以及交互性更强的Web应用程序的技术，并不是一个编程语言。

ajax特点

1、在不更新整个页面的前提下更新部分内容或维护数据。
2、通过在后台与服务器进行少量数据交互，实现网页的异步更新。
3、Ajax不需要任何浏览器插件，用户只需要允许JavaScript在浏览器上执行

总的来说，Ajax最大的特点就是实现了网页的异步更新，也就是在不重新加载整个网页的前提下，对网页某部分进行更新

交互方式

同步交互：客户端发起一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
异步交互：客户端发起一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

工作原理

1、Ajax相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。
2、并不是所有用户请求都是提交给服务器，像一些数据验证和数据处理等都是交给Ajax来做。
3、客户端发起请求，请求交给Ajax，Ajax把请求提交给服务器，服务器进行业务处理，服务器响应数据后交给Ajax对象，Ajax对象接收数据，最后由Javascript把数据渲染到页面上。

基本语法

$.ajax({
    /*发送地址
    不写则默认朝当前所在url提交数据
     全写，JavaWeb_01/book/addBook.html
     只写后缀*/
    url:"",
    /*请求方式，默认get*/
    type:"get",
    /*要发送的数据*/
    data:{'user':'www','pass':'1234'},
    success:function () {
     /*回调函数（异步回调机制）*/
    }

})

二、Ajax封装

ajax封装步骤

第一步	创建一个创建XMLHttpRequest对象的函数
第二步	创建一个Ajax请求函数
第三步	设置请求方式、是否异步的默认值
第四步	判断请求方式是否是POST，如是，则要多设一个请求头 setRequestHeader
第五步	发送请求
第六步	获取响应数据函数
第七步	判断readystata是否等于4、status是否等于200
第八步	判断然后设置 响应数据类型
第九步	调用回调函数

ajax封装示例如下：

function ajaxUitl(option) {
//根据浏览器版本创建一个XMLHttpRequest对象的函数
    function createXMLHTTPRequest() {
        if (window.XMLHttpRequest) {
            let xmlHttp = new XMLHttpRequest();
            return xmlHttp;
        } else {
            let xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            return xmlHttp;
        }
    }

    //创建一个ajax请求函数
    /*
    * 参数：
    * (1)请求方式
    * (2)请求的URL地址：url
    * (3)是否异步：aync
    * (4)请求参数：data
    * (5)响应数据类型：dataType
    * (6)回调函数：决定怎么去处理响应的数据  callback*/
    function ajax(option) {
        //1、创建请求对象
        let xmlHttp = createXMLHTTPRequest();
        //2、设置默认值
        if (option.method == undefined) {
            option.method = "GET";
        }
        if (option.async == undefined) {
            option.async = true;
        }
        //3、发送请求
        xmlHttp.open(option.method, option.url, option.async);
        //如果是POST方式的请求，则要多设一个请求头
        if (option.method == "POST") {
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        xmlHttp.send(option.data);
        //4、获取响应数据
        xmlHttp.onreadystatechange = function () {
            //判断状态
            if (xmlHttp.readyState == 4 && status == 200) {
                let data = null;
                //判断响应的数据类型是否为未定义或者为空，如果是，则默认响应的数据类型为text
                if (option.dataType == "XML") {
                    data = xmlHttp.responseXML;
                } else if (option.dataType == "String") {
                    data = xmlHttp.responseText;
                } else if (option.dataType == "JSON") {
                    data = JSON.parse(xmlHttp.responseText);
                } else {
                    data = xmlHttp.responseText;
                }
                //调用回调函数
                option.callback(data);
            }
        }
    }
}