Ajax工具函数封装

原生Ajax写法回顾

原生使用Ajax主要分为五步,需要手写较多内容,如果每次我们使用Ajax都需要手写一遍,较为浪费时间,所以我们将公共代码抽取,封装为工具函数.

• 五步使用法:
  1. 建立XMLHTTPRequest对象
  2. 注册回调函数
     • 当服务器回应我们了,我们想要执行什么逻辑
  3. 使用open方法设置和服务器端交互的基本信息
     • 设置提交的网址,数据,post提交的一些额外内容
  4. 设置发送的数据，开始和服务器端交互
     • 发送数据
  5. 更新界面
     • 在注册的回调函数中,获取返回的数据,更新界面

• 示例代码:GET get的数据,直接在请求的url中添加即可

  <script type="text/javascript">
    // 创建XMLHttpRequest 对象
    var xml = new XMLHttpRequest();
  
    // 设置跟服务端交互的信息
    xml.open('get','01.ajax.php?name=fox');
    xml.send(null);    // get请求这里写null即可
  
    // 接收服务器反馈
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 打印响应内容
            alert(xml.responseText);
        } 
    };
  </script>
  

• 示例代码:POST

  <script type="text/javascript">
    // 异步对象
    var xhr = new XMLHttpRequest();
  
    // 设置属性
    xhr.open('post', '02.post.php' );
  
    // 如果想要使用post提交数据,必须添加
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  
    // 将数据通过send方法传递
    xhr.send('name=fox&age=18');
  
    // 发送并接受返回值
    xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
           alert(xhr.responseText);
         } 
    };
  </script>
  

抽取公共部分

重复步骤分析:

* 创建异步对象
* 异步对象`open`,`send`方法调用
* `post`方法添加`HTTP`协议头文件
* 判断`Ajax`响应状态

封装方法1:提取需要改变部分

哪些部分是需要使用者自定义的:

1. **提交方法**
2. **url地址**
3. **数据**
4. **Ajax请求成功调用方法**

上述内容,应该是调用时,由用户传入的

function ajax(argument) {
    // 创建对象
    var xmlRequest ;
    if (XMLHttpRequest) {
        xmlRequest = new XMLHttpRequest();
    }else{
        xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

    }
    // open方法
    xmlRequest.open(提交方法,url地址)

    // 如果是post设置HTTP协议头
    if (方法=="post") {
        xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    }

    // send方法
    xmlRequest.send(数据);

    // 判断状态改变,调用方法
    xmlRequest.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
               自定义方法(数据);  
       } 
    };
}

封装方法2:定义方法参数

将需要用户自定义的部分,通过方法的参数传递进来

封装方法3:优化参数

参数的数量较多,如果可以之传入一个对象,将需要传入的参数,作为对象的属性,方法看起来会更为简洁

• 示例: 

• 使用方法: 

封装方法4:参数格式化

自定义ajax传递参数时,数据的格式为name=fox&age=18,而我们在写js代码时,创建js对象更为便捷,所以接下来添加处理数据的逻辑

• 思路分析:约定:传入的是js对象

  • 将js对象格式化为:name=fox&age=18
  • 判断提交方法,将格式化好的数据放置到对应的位置

• 格式化数据代码: 

• 修改之后代码:

  function ajax(option) {
    // 创建对象
    var xmlRequest ;
    if (XMLHttpRequest) {
        xmlRequest = new XMLHttpRequest();
    }else{
        xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
  
    }
  
    // 格式化传入的数据为name=fox&age=18这样的格式
    var formatStr = "";
    for(var item in option.data){
        // 获取属性名,属性值,进行拼接
        formatStr+=item;// 属性名
        formatStr+="=";//等号
        formatStr+=option.data[item];//属性值
        formatStr+="&";//分隔符
    }
  
    // 去除最后一个&
    formatStr = formatStr.slice(0,-1);
  
    // open方法 如果是get方法,那么url之后需要添加数据
    if(option.method == "get"){
        option.url = option.url+"?"+formatStr;
        option.data = null;
    }
    // 调用open方法
    xmlRequest.open(option.method,option.url)
  
    // 如果是post设置HTTP协议头
    if (option.method=="post") {
        xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    }
  
    // send方法 这里的data已经是修改过的,如果使用的是get方法,那么data为null
        xmlRequest.send(option.data);
  
    // 判断状态改变,调用方法
    xmlRequest.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
               option.success(这里的数据是ajax获取的);  
       } 
    };
  }
  

封装方法5:参数格式化

为了避免自定义的Ajax方法被用户自定义的方法覆盖,添加到命名空间下,进行最后一步优化

• 命名空间:
  • 为了防止自定义的Ajax函数被用户覆盖,可以通过将该函数设置为一个对象的方法
  • 使用时,只需要通过对象.方法即可使用