模仿Jquery的ajax，利用XMLHttpRequest 对象，封装自己Ajax

半江秋月

已于 2022-05-16 23:03:21 修改

阅读量326

点赞数

分类专栏： js 文章标签： ajax jquery javascript

于 2022-05-16 23:01:43 首次发布

本文链接：https://blog.csdn.net/q2211164/article/details/124809786

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

引入模板

$.ajax({
   method:'GET/POST'
   url:
   data:
   success:fuction(respond){
       console.log(repond)
   }
 })

已知函数 $.ajax() 内放置的是个对象里面有 method url data success等属性

故定义属于自己自己函数

function Myajax(params) {

}
//该形参params也是个对象里面有methon  url data  success属性

在函数内创建一个XMLHttpRequest 的实例

function Myajax(params) {
//构造实例
let xhl= new XMLHttpRuqest();

//设置发送的方式和地址,由于方式没确定故暂时不写
xhl.open('','');

//发送请求
xhl.send();

//构建状态改变事件
 xhl.onreadystatechange = function() {}


}

由于请求方式不确定故先设置事件函数的函数体

function Myajax(params) {
  //构造实例
let xhl= new XMLHttpRuqest();

  //设置发送的方式和地址,由于方式没确定故暂时不写
xhl.open('','');

  //发送请求
xhl.send();

  //构建状态改变事件
 xhl.onreadystatechange = function() {}
   //对status进行判断，看看是否传回正确的值
 if (xnl.readyState == 4 && xnl.status == 200) {
            //将接收的值转成对象格式
            let obj = JSON.parse(xnl.response);
            //将obj赋值传到params.success
            params.success(obj);
        }


}

对请求方式进行判断，再根据判断执行相应代码

function Myajax(params) {
  //构造实例
let xhl= new XMLHttpRuqest();



    //函数作用将对象转成字符串
    function ObjToString(data) {
        //定义个数组来存储转化的字符串
        let arr = [];
        //遍历对象，将对象转换成 c=1,b=2;的形式
        for (key in data) {
            arr.push(`${key}=${data[key]}`)

        }
        //把arr进行返回，并在返回时使用 数组.join()方法进行转换成字符串
        //join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的
        return arr.join('&');

    }

  //将函数所传回的值进行接受
    let qs = ObjToString(params.data);

   //因为不知道输入的方式是大写小写，所以将值统一转换成，使用方法toUpperCase()
    if (params.method.toUpperCase() == 'GET') {
        //获取发送的类型请求方法和资源路径
        //GET注意点  +'?'+qs
        xnl.open('GET', params.url + '?' + qs);
        //发送
        xnl.send();
    } else if (params.method.toUpperCase() == 'POST') {
        //因为POST的注意点不同所以进行设置
        xnl.open('POST', params.url);
        //注意点一：设置编码方法
        xnl.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        //发送
        //注意点二：POST传递的方式都为用&lai，所以定义函数进行转化
        xnl.send(qs);
    }





  //构建状态改变事件
 xhl.onreadystatechange = function() {}
   //对status进行判断，看看是否传回正确的值
 if (xnl.readyState == 4 && xnl.status == 200) {
            //将接收的值转成对象格式
            let obj = JSON.parse(xnl.response);
            //将obj赋值传到params.success
            params.success(obj);
        }


}

最后完成后进行测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   //引用自己创建的js文件
    <script src="./day02-封装自己ajax.js"></script>
    <script>
   //对GET进行测试
        Myajax({
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            data: {},
            success: function(res) {
                console.log(res);
            }
        })

   //对POST进行测试
        Myajax({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
                bookname: "没学废",
                author: "哈哈",
                publisher: "随便出版社"
            },
            success: function(res) {
                console.log(res);
            }
        })
    </script>
</body>

</html>

打印值

创建成功