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

目录

引入模板

---

$.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);
        }


}

最后完成后进行测试

    
    
    
    



   //引用自己创建的js文件
    
    

打印值

 创建成功