js封装Ajax中的 $.get()

мо仙堡杠把子ご灬

已于 2023-04-07 09:19:41 修改

阅读量3.1k

点赞数 1

分类专栏： javascript 文章标签：做一个有知识的流氓

于 2019-06-23 16:31:36 首次发布

本文链接：https://blog.csdn.net/weixin_43553701/article/details/93386407

版权

javascript 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

得到了就好好珍惜，得不到就不要了.

Ajax技术中的 $.get()封装

$.get(var1,var2,var3,var4); 四个参数
- 参数一:请求的后端程序的地址
- 参数二:要发送到后端程序的数据,json 对象/js对象(推荐使用)或者也可以是字符串
- 参数三:当readyState == 4 的时候会触发一个函数,该函数中有一个参数,就是后端程序返回的数据
- 参数四:设置返回数据的类型: text(默认) json XML …
  $KaTeX parse error: Expected 'EOF', got '&' at position 25: \dotset.php','id=111&̲name=ldx',funct\dots$ .get方法进行了解下面进行封装

第一步 : 首先编写一个具体的案例,

具体案例:封装一个get方法,能够发送ajax请求,请求 1.PHP文件 , 并能够接收返回值
①. 使用原生js完成ajax请求过程
②. 定义$对象 , 再定义get成员方法

       <script>
               //  编写一个普通程序
               var xhr = new XMLHttpRequest();
               xhr.onreadystatechange = function() {
                   if (xhr.readyState == 4) {
                       alert(xhr.responseText);
                   }
               }
               xhr.open('get', './1.php');
               xhr.send(null);
       </script>
       相信你能看的懂,看不懂的话可以辞职,换工作了.

   通过分析上面的代码,一共发现了五个问题

- 在创建XMLHttpRequest对象是,没有处理兼容问题
- 访问地址只是一个地址,不灵活
- 无法灵活的向后端进行参数发送
- 前端无法灵活接收后端返回的数据
- 返回类型单一,只能使用字符串

    2. 处理创建XMLHttpRequest对象时的兼容性问题

    <script>
            //   设置兼容性问题
            var $ = {
                get: function() {
                    var xhr = this.createXhr(); // 调用下面的函数并进行实例化
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4) {
                            alert(xhr.responseText);
                        }
                    }
                    xhr.open('get', './1.php');
                    xhr.send(null);
    
                },
                // 处理兼容性问题的方法
                createXhr: function() {
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    } else {
                        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
                    }
                    return xmlhttp;
                }
            }
    </script>

处理只能访问1.php文件的文件的问题。
思路: 定义get函数时设置形参，调用函数时传递实参

① 修改get方法，设置参数1 — 请求的url地址

       <script>
               //   设置文件访问问题,因为只能访问一个页面
               var $ = {
                   get: function(url) { // 将这里的参数改为 url 进行传参
                       var xhr = this.createXhr();
                       xhr.onreadystatechange = function() {
                           if (xhr.readyState == 4) {
                               alert(xhr.responseText);
                           }
                       }
                       xhr.open('get', url); // 准备ajax请求的这里也需要改一下
                       xhr.send(null);
       
                   },
                   // 处理兼容性问题
                   createXhr: function() {
                       var xmlhttp;
                       if (window.XMLHttpRequest) {
                           xmlhttp = new XMLHttpRequest();
                       } else {
                           xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
                       }
                       return xmlhttp;
                   },
               }
       
               $.get( './1.php'); // 在调用的时候讲文件路劲以参数的形式传入
       </script>

处理请求后台文件时无法发送数据
思路: 将js对象组装为字符串，拼接在请求的url地址之后
$.get(‘1.php’, {“id”:1, “name”:“zs”} , …) --> 1.php?id=1&name=zs
本质: {“id”:1, “name”:“zs”} —> id=1&name=zs

       ① 封装params方法，将js对象转为字符串

        // 处理请求后台文件时无法发送数据 
         params: function(obj) {
               // 定义一个空字符串,进行下面的拼接
                var str = '';
                for (var key in obj) {
                     str += key + '=' + obj[key] + '&';  //id=1&name=zs$ 
                   } 
                //  在循环之后将字符串最后一个多出来的 & 删除
                str = str.slice(0, -1);
                return str;
           }

   一步一步进行...

           <script>
               //   处理请求后台文件时无法发送数据 使用拼接字符串的方法
               var $ = {
                   get: function(url, js_obj) {
                       var xhr = this.createXhr();
                       xhr.onreadystatechange = function() {
                               if (xhr.readyState == 4) {
                                   alert(xhr.responseText);
                               }
                           } // 在get方法中调用发送数据的方法
                       var str = this.params(js_obj); // 调用方法并进行传参 会将传入的数据进行处理
                       url = url + '?' + str;// 将处理完的数据与url进行拼接进行传参
                       xhr.open('get', url);
                       xhr.send(null);
       
                   },
                   // 处理兼容性问题
                   createXhr: function() {
                       var xmlhttp;
                       if (window.XMLHttpRequest) {
                           xmlhttp = new XMLHttpRequest();
                       } else {
                           xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
                       }
                       return xmlhttp;
                   },
                   // 处理请求后台文件时无法发送数据 
                   params: function(obj) {
                       // 定义一个空字符串,进行下面的拼接
                       var str = '';
                       for (var key in obj) {
                           str += key + '=' + obj[key] + '&';
                       } //  在循环之后将字符串最后一个多出来的 & 删除
                       str = str.slice(0, -1);
                       return str;
                   },
       
               }
       
               $.get('./1.php'); // 在调用的时候讲文件路劲以参数的形式传入
           </script>

处理readyState==4时的回调函数
① 在$.get方法中设置参数3，在方法体中使用函数形式调用，就相当于执行了一个函数

       <!-- <script>
               //   处理请求后台文件时无法发送数据 使用拼接字符串的方法
               var $ = {
                   get: function(url, js_obj) {
                       var xhr = this.createXhr();
                       xhr.onreadystatechange = function() {
                               if (xhr.readyState == 4) {
                                   alert(xhr.responseText);
                               }
                           } // 在get方法中调用发送数据的方法
                       var str = this.params(js_obj); // 调用方法并进行传参 会将传入的数据进行处理
                       url = url + '?' + str;// 将处理完的数据与url进行拼接进行传参
                       xhr.open('get', url);
                       xhr.send(null);
       
                   },
                   // 处理兼容性问题
                   createXhr: function() {
                       var xmlhttp;
                       if (window.XMLHttpRequest) {
                           xmlhttp = new XMLHttpRequest();
                       } else {
                           xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
                       }
                       return xmlhttp;
                   },
                   // 处理请求后台文件时无法发送数据 
                   params: function(obj) {
                       // 定义一个空字符串,进行下面的拼接
                       var str = '';
                       for (var key in obj) {
                           str += key + '=' + obj[key] + '&';
                       } //  在循环之后将字符串最后一个多出来的 & 删除
                       str = str.slice(0, -1);
                       return str;
                   },
       
               }
       
               $.get('./1.php'); // 在调用的时候讲文件路劲以参数的形式传入
           </script> -->

处理能够接收不同类型的返回值

① 在$.get方法声明时，设置参数4，判断参数4的值，如果是json则进行额外处理

             <!-- <script>
                 // 处理能够接受不同类型的返回值 在get方法中进行判断
                 var $ = {
                     get: function(url, js_obj, success, datatype) {
                         var xhr = this.createXhr();
                         xhr.onreadystatechange = function() {
                                 if (xhr.readyState == 4) {
                                     var result = xhr.responseText; // 返回值是一个字符串
                                     if (datatype == 'json') {
                                         result = JSON.parse(result);
                                     }
                                     success(result);
                                 }
                             } // 在get方法中调用发送数据的方法
                         var str = this.params(js_obj); // 调用方法并进行传参 会将传入的数据进行处理
                         url = url + '?' + str; // 将处理完的数据与url进行拼接进行传参
                         xhr.open('get', url);
                         xhr.send(null);
         
                     },
                     // 处理兼容性问题
                     createXhr: function() {
                         var xmlhttp;
                         if (window.XMLHttpRequest) {
                             xmlhttp = new XMLHttpRequest();
                         } else {
                             xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
                         }
                         return xmlhttp;
                     },
                     // 处理请求后台文件时无法发送数据 
                     params: function(obj) {
                         // 定义一个空字符串,进行下面的拼接
                         var str = '';
                         for (var key in obj) {
                             str += key + '=' + obj[key] + '&';
                         } //  在循环之后将字符串最后一个多出来的 & 删除
                         str = str.slice(0, -1);
                         return str;
                     }
         
                 }
                 $.get('./2.php', {
                         "name": 'qw',
                         "age": 12
                     }, function(data) {
                         alert(data);
                     },
                     'text')
             </script> -->

мо仙堡杠把子ご灬

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js封装Ajax中的 $.get()

① 在$.get方法声明时，设置参数4，判断参数4的值，如果是json则进行额外处理。思路: 定义get函数时设置形参，调用函数时传递实参。① 修改get方法，设置参数1 — 请求的url地址。处理只能访问1.php文件的文件的问题。Ajax技术中的 $.get()封装。第一步 : 首先编写一个具体的案例,
复制链接

扫一扫