ajax请求封装函数

时间:2023-03-08 21:40:23
ajax请求封装函数
  • 写封装函数的套路

1.先写出这个函数原来的基本用法

2.写一个没有形参空函数,将上一步的代码直接作为函数体,

3.根据使用过程中,抽象出来需要变的东西作为形参

function ajax (method, url, params, fun) {
method = method.toUpperCase() //在传入method的时候可以忽略大小写
var xhr = new XMLHttpRequest() if (typeof params === 'object') { //如果在地址传入的东西是一个对象,我们将它的格式转化为urlencoded
var tempArr = []
for (var key in params) {
var value = params[key]
tempArr.push(key + '=' + value)
}
params = tempArr.join('&') //===>这里的格式就为parsms=[key1=value&key2=value2]
} if (method === 'GET') {
url += '?' + params
} xhr.open(method, url, false) var data = null
if (method === 'POST') { //如果请求的方式为POST,需要手动设置请求头的Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
data = params
} xhr.onreadystatechange = function () {
if (this.readyState !== 4) return // console.log(this.responseText) //这里可以得到响应体,但是后面要处理的内容应该根据使用者的需要来处理 fun(this.responseText)
} xhr.send(data)
} // 调用者
// ============================ var fun = function (res) {
console.log(res);
} ajax('get', 'test.php', {}, fun)