重写post和get方法

忘是亡心i 2022-09-11 15:25 194阅读 0赞

# 一、重写jQuery的get请求 #

对ajax中的get方法进行重写

1.首先得知道get请求需要传递的参数

url,

data

header

success/error

2.其次知道在get方法中传递这些参数的作用

`let xhr = new XMLHttpRequest()`

url表示请求的地址

data：表示传递进去的数据，get请求的数据是放在url中，需要给url做一个与data的拼接

`url = url+'?'+Qs.stringify(data)`

`xhr.open('GET',url)`

header:表示请求的头部，包括获取的令牌,在open和send之间

for(var i in headers){ 
    let v = header[i];
    }

`xhr.send()`

success:表示请求成功之后的一个回调

`success.call(this,resp)`

3.然后再将全部代码写出

测试的HTML页面如下

# 二、重写jQuery中post请求 #

对jQuery中的post请求进行重写

我们知道，在post请求中，数据是存放在请求体中，下面是我写的重写的post请求，但是感觉不太对，希望各位批评指正

// 重写post请求
    let jQuery = { };
    (function($) { 
        $.post = function({ 
            url,
            // params = {},
            data = { },
            headers = { },
    
            success
    
        }) { 
            // 初始化xhr
            let xhr = new XMLHttpRequest();
            // 初始化请求头
    
            xhr.open('POST', url);
    
    
            for (let k in headers) { 
                let v = headers[k];
                xhr.setRequestHeader(k, v);
            }
            // 初始化请求体
            // xhr.setRequestHeader("Authorization",token);
            xhr.send(JSON.stringify(data));
            // 监听响应
            xhr.onreadystatechange = function() { 
                if (this.readyState === 4 && this.status === 200) { 
                    let resp = JSON.parse(this.response);
                    success.call(this, resp);
                }            
                }
            }
    
    
        }
    })(jQuery);

html代码：