Ajax工具函数封装

骑猪看日落 2022-07-12 07:24 200阅读 0赞

##  ##

## 原生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请求成功调用方法**
> 
> 上述内容,应该是调用时,由用户传入的

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

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

![ajaxtool\_step01.gif-818.9kB][ajaxtool_step01.gif-818.9kB]

### 封装方法3:优化参数 ###

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

*  示例: ![ajaxtool\_step02.gif-2735.4kB][ajaxtool_step02.gif-2735.4kB]
 *  使用方法: ![ajaxtool\_step03.gif-2232.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][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][ajaxtool_step06.gif-230.3kB]

[ajaxtool_step01.gif-818.9kB]: /images/20220711/f2d82026d8c04d7fb3d31d18fd8f3fe7.png
[ajaxtool_step02.gif-2735.4kB]: /images/20220711/f2d9297c91e343ccaf70413132496235.png
[ajaxtool_step03.gif-2232.4kB]: /images/20220711/05b369c9d0a249fe87e8baffd9cdbcb4.png
[ajaxtool_step04.gif-4233.8kB]: /images/20220711/fef8137a142549cdbd0b18c503d8df41.png
[ajaxtool_step06.gif-230.3kB]: /images/20220711/9bac60c70f88407ba66d20ffa133f496.png