前端常见面试题（七）ajax

原生AJAX

AJAX 使用 XMLHttpRequest 对象进行请求发送和响应，局部刷新页面的技术。
流程如下：

1. 生成 XMLHttpRequest 对象：  let request = new XMLHttpRequest()
2. 配置 XMLHttpRequest 对象：  request.open('method','path')
3. 发送请求：  request.send()
4. 监听 XMLHttpRequest 对象：  request.onreadystatchange()

---

• 客户端：JS 发起请求
• 服务端： JS 响应请求

发送请求的要素：

1.  请求行（请求方法、请求路径、协议） request.open('method','/path')
2.  请求头 request.setHeader('header','value')
3.  请求体（请求数据） request.send('date')

响应请求的要素：

1.  状态行（协议版本、响应码、响应文本） request.status request.statusText
2.  响应头 request.getResponseHeader() request.getAllResponseHeaders()
3.  响应正文（返回的数据） request.responseText

封装AJAX

let request = new XMLHttpRequest()
request.open('get','/path') 
request.send()
request.onreadystatechange = function(){
    if(request.readyState === 4){  // 请求响应完毕
        if(request.status >= 200 && request.status < 300){ // 请求响应成功
            console.log('请求成功')
            console.log('请求获取的响应数据是：' + resquest.responseText)
            console.log(typeof resquest.responseText)     // string
            let string = resquest.responseText
            let object = window.JSON.parse(string)  // 将符合JSON语法的字符串转换成js对应的值
            console.log(typeof object)         // "object" 
        } else if(quest.status >= 400){
            console.log('请求失败。')
        }
    }
}