ajax的基本封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax封装</title>
</head>
<body>
<script>
//封装者
function ajax (method,url,params,done) { //希望params传递的是对象
method = method.toUpperCase() //将请求方法都转成大写
var xhr = new XMLHttpRequest();//创建对象
//将params转换成字符串
//将object类型的参数转换成'key1=value1&key2=value2'格式
if(typeof params === 'object'){
var tempArr = []
for(var key in params){
var value = params[key]
tempArr.push(key + '=' + value)
}
//tempArr = ['key1=value1','key2=value2']
params = tempArr.join('&')
//tempArr = ['key1=value1&key2=value2'] //转成了字符串
}
if(method === 'GET'){
url += '?' + params //get请求url后面拼接问号
}
xhr.open(method,url); //向服务器发送请求
var data = null
if(method === 'POST'){
xhr.setRequestHeader('Content-Type','“application/x-www-form-urlencoded”') //post请求需设置请求头
data = params
}
xhr.send(data); //向服务器发送请求
xhr.onreadystatechange = function(){ //服务器响应请求
if(this.readyState !==4) return //readyState不为4时return
//!!!!!不应该在封装的函数中主观的处理响应的结果,应该在调用者身上使用响应的结果,要拿到响应的结果
//不应该在封装者里面主观的去判断调用者要去干什么
// console.log(this.responseText)
//调用这个函数
done(this.responseText)
}
}
//调用者
//变被动为主动,定义一个函数,传递函数,调用者传递给封装者
var onDone = function(res){
console.log(res) //res就是即可拿到this.responseText的内容
console.log('做完了')
}
// ajax('GET' , 'time.php' , 'id=1')
// ajax('POST', 'add.php' , 'key1=value1&key2=value2') //传字符串形式,但是多数情况下是传递对象形式
// ajax('GET' , 'time.php' , {id:1})
// ajax('POST', 'add.php' , {key1:'value1',key2:'value2'})
// ajax('post', 'add.php' , {key1:'value1',key2:'value2'})
ajax('post', 'add.php',{}, onDone)
</script>
</body>
</html>