JS基础总结（6）—— HTTP请求

1. Ajax

Ajax: Asynchronous JavaScript + XML
能够向服务器请求额外数据而无须卸载页面

1.1 XMLHttpRequest

原生进行http请求方法如下：

const request = new XMLHttpRequest()
// 以下是两种状态监听方案
// 1. 使用onreadystatechange监听XMLHttpRequest对象的状态
request.onreadystatechange = function () {
   
    // readyState: 0: 未调用open(), 1: 调用open()未调用send()
    // 2. 调用send()未收到响应, 3. 收到部分响应数据 4. 收到全部数据
    if (request.readyState === 4) {
   
        console.log('请求完成了')
    } else if (request.readyState === 3) {
   
        console.log('收到数据了')
    }
}
// 2. 使用ProgressEvent对象监听XMLHttpRequest状态
// ProgressEvent对象: 测量如 HTTP 请求等底层流程进度的事件
request.onload = function (event) {
    // 相当于readyState为4
    console.log('收到数据了:' + event.currentTarget.responseText)
}
request.onprogress = function (event) {
    // 相当于readyState为3
    if (event.lengthComputable && event.totalSize) {
   
        console.log('当前加载进度为' + 
        (event.position / event.totalSize).toFixed(2) + '%')
    }
}
request.onerror = function (err) {
   
    console.log(err)
}
request.timeout =