JS深入基础之Ajax的请求过程

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)
}