Ajax的请求过程
1.创建XMLHttpResquest实例对象
2.Resquest.open(),三个参数分别是(method,url,async)
3.可以按需求来设置request.setRequestHeader来设置请求头
3.如果Resquest.open()的async参数是true(默认是true),那么就要定义事件监听器onreadystatechange,
他可以在事件监听器的函数内以检测request.readyState请求状态,request.status响应状态码,request.getResponseHeader('Content-Type')查找Content-Type头来验证响应主体是不是期望的类型。如果都通过callback返回request.responseText
4.如果Resquest.opne()的第三个参数async的值是false,那么表示就是同步的,就不需要事件处理程序了,不用设置request.onreadystatechange。
5.Request.send(),如果是post,里面要设置一个string来放置post的参数,get则不用。
下面来分别写一个post和get的例子
// 异步post
function postExp(url,msg,callback){
var request = new XMLHttpRequest()
request.open('post',url)
request.setRequestHeader('Content-type','text/plain;charseUTF-8')
request.onreadystatechange = (()=>{
if(request.readyState === 4 && request.status === 200){
callback('成功')
}else{
callback('失败了')
}
})
request.send(msg)
}
// 异步get
function getExp(url,callback){
var request = new XMLHttpRequest()
request.open('get',url)
request.onreadystatechange = (()=>{
// 请求结束并且成功
if(request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader('Content-type')
if(type.indexOf('xml') != -1 && request.responseXML){
callback(request.responseXML)
}else if (type == 'aplication/json'){
callback(JSON.parse(request.responseText))
}else {
callback(request.responseText)
}
}
})
request.send(null)
}
复制代码