AJAX的理解与使用

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

• Asynchronous，异步，通常看到 async 就表示是异步的意思 (sync 通常表示同步)

• JavaScript，JS，核心对象，XMLHttpRequest（xhr），可以实现浏览器与服务端通信（发送请求、接收响应）

• XML，数据交互格式，现在常用 JSON 来交换数据

最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，提高网络带宽的使用效率。将这种技术称为无刷新技术（局部刷新）

缺点是不利于 SEO (搜索引擎优化)

使用

1. 创建 XMLHttpRequest（xhr） 对象实例（准备手机）

2. 建立连接，调用 xhr.open() 建立连接（查找电话号码，准备拨号）

3. 发送数据，调用 xhr.send() （拨号）

4. 准备处理响应数据（等待接通电话，通话）

open() 语法：

xhr.open(method, url, async)

• method，请求方法，如 GET、POST

• url，请求资源路径

• async，是否异步，通常 ajax 都使用异步，true 表示异步，false 表示同步

send() 语法：

xhr.send(params)

•  params 是请求发送的参数，如果是 GET 请求，参数是使用 ? 拼接在 URL 后。如果是 POST 请求，作为 send() 方法的参数传递，但在调用 send() 前需要调用 setRequestHeader() 方法设置请求头

setRequestHeader()：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

设置请求头

readyState：就绪状态码，4表示请求处理完毕，响应就绪

status：HTTP状态码，200表示成功

responseText：响应文本

实例：

// GET 请求
// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest()
// 2. 建立连接
// xhr.open(method, url, async)
xhr.open('GET', '/login.do?username=admin&password=admin', true)
// 3. 发送请求
xhr.send()
// 4. 等待，处理响应
xhr.onreadystatechange = function() {
    // 当 readyState 改变时，执行该回调函数
    // readyState 属性存有 XMLHttpRequest 的状态信息。
    // 可以理解为请求到达哪个阶段了。
    // 状态值可取 0-4 的值，4表示请求处理完毕，响应就绪
    if (xhr.readyState === 4) {
        // status 表示的是 HTTP 状态码
        // 200 表示 OK (成功)
        if (xhr.status === 200) {
            // 从响应中获取返回的数据
            const data = xhr.responseText
            console.log(data)
        }
    }
}

// POST 请求
// 1. 创建核心对象
const xhr = new XMLHttpRequest()
// 2. 建立连接（打开）
xhr.open('POST', '/login.do', true)
// 3. 发送请求
// 要向服务端 POST 发送数据，则需要在调用 send() 方法前，设置请求头的 Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('username=abc&password=123')
// 4. 处理响应
xhr.onreadystatechange = function() {
    // 4: 请求处理完毕，响应就绪
    if (xhr.readyState === 4) {
        // 200: ok
        if (xhr.status === 200) {
            const data = xhr.responseText
            console.log('data:', data)
        }
    }
}