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:定义方法参数

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

ajaxtool_step01.gif-818.9kB

封装方法3:优化参数

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

  • 示例: ajaxtool_step02.gif-2735.4kB
  • 使用方法: ajaxtool_step03.gif-2232.4kB

封装方法4:参数格式化

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

  • 思路分析:约定:传入的是js对象
    • js对象格式化为:name=fox&age=18
    • 判断提交方法,将格式化好的数据放置到对应的位置
  • 格式化数据代码: ajaxtool_step04.gif-4233.8kB
  • 修改之后代码:
    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函数被用户覆盖,可以通过将该函数设置为一个对象的方法
    • 使用时,只需要通过对象.方法即可使用 ajaxtool_step06.gif-230.3kB

发表评论

邮箱地址不会被公开。 必填项已用*标注