GET和POST请求的封装

2024-01-18 09:13:10

GET请求的封装

<body>
<script src="/ajax.js"></script>
  <script>
    ajax.get("1.php",{"id":1,"name":"小明","age":18},function(value){
      console.log(value)
    });
  </script>
</body>

ajax.js

(function(){
    // 唯一暴露的参数变量
    window.ajax = ajax = {};//给Windows的ajax赋一个值，这个值是一个变量名，这个变量名的对象
    console.log(window)
    ajax.get = function(url,json,callback) {
        console.log(url,json,callback)
    }
  })()

此时我们就可以拿到数据，通过ajax.get传入参数，我们可以输出window属性，可以看到这个get函数，其中携带着我们传入的参数

1.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="box"></div>
<script src="/ajax.js"></script>
  <script>
   var box=document.getElementById("box");
   ajax.get("1.php",{"id":1,"name":"小明","age":18},function(value){
       console.log(value)
   })
  </script>
</body>
</html>

ajax.js文件

(function(){
    // 唯一暴露的参数变量
    window.ajax = ajax = {};//给Windows的ajax赋一个值，这个值是一个变量名，这个变量名的对象
    console.log(window)
    ajax.get = function(url,JSON,callback) {
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status>=200&&xhr.status<=300||xhr.status==304){
                    callback(xhr.responseText)
                }
            }
        }
        // 拼接JSON数据，比如我们的参数{"id":1,"name":"小明","age":18}
         // 转换为id=10001&name=小明&age=18
         var temp = [];
         for(var k in JSON) {
           temp.push(k+"="+encodeURI(JSON[k]));
         }
         // 将temp的数据转换为字符串格式的，共最后提交请求使用
         var str = temp.join("&");
         // 防止没有参数
         if(str) {
           url+="?"+str
         }
         xhr.open("get",url,true);
         xhr.send(null);
       
          
    }
  })()

三个参数情况

 ajax.get("1.php",{"id":1,"name":"小明","age":18},function(value){
       console.log(value)
   })

两个参数情况

ajax.get("1.php",function(value){
       console.log(value)
   })

如果传入的参数是两个，那么需要设置一个判断信息

在ajax.js文件中的ajax.get函数中添加一个判断信息

   // 如果用户只传了两个参数，第二个参数如果不是JSON就是函数
         // 如果第二个参数的类型是函数了，说明第二个参数就是回调函数
         if(typeof JSON == "function") {
           // 如果第二个参数是回调函数了，让callback参数就等于这个函数
           callback = JSON;
           JSON = {};
         }

POST请求

POST请求实际上和GET请求的内容基本相同

 ajax.post=function(url,JSON,callback){ 
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status>=200&&xhr.status<=300||xhr.status==304){
                    callback(xhr.responseText)
                }
            }
        }
          // 拼接JSON数据，比如我们的参数{"id":1,"name":"小明","age":18}
         // 转换为id=10001&name=小明&age=18
         var temp = [];
         for(var k in JSON) {
           temp.push(k+"="+encodeURI(JSON[k]));
         }
         var str=temp.join("&")||null
         xhr.open("post",url,true);
         xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
         xhr.send(str)
       
    }

ajax.post("1.php",{"id":1,"name":"小明","age":18},function(value){
       console.log(value)
   })

传两个参数或者三个参数的解决方法跟get请求一样。

码农公寓

GET请求的封装

POST请求

相关文章