Ajax-XMLHttpRequest 基本使用

共计 2562 个字符，预计需要花费 7 分钟才能阅读完成。

使用 xhr 发起 GET 请求

1. 创建 xhr 对象

        // 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest()

2. 调用 xhr.open() 函数，指定请求方式与URL地址

        // 2. 调用 open 函数，指定请求方式与 URL 地址
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

3. 调用 xhr.send() 函数，发起Ajax请求

        // 3. 调用 send 函数，发起 Ajax 请求
        xhr.send()

4. 监听 xhr.onreadystechange 事件

        // 4. 监听 onreadystatechange 事件
        xhr.onreadystatechange = function () {
            // 4.1. 监听 xhr 对象的请求状态 readyState； 与服务器响应 status
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 4.2. 打印服务器响应回来的数据
                console.log(xhr.responseText);
            }
        }

xhr 对象的 readyState 属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前Ajax请求所处的状态；每个Ajax请求必然处于以下状态中的一个：

使用 xhr 发起带参数的 GET 请求

    // ...省略1、3、4步骤的代码
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
    // 返回结果是id为1的数据

这种在 URL 地址后面拼接的参数，叫做 查询字符串

查询字符串

• 定义：查询字符串（URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）
• 格式：将英文的 ? 放在URL的末尾，然后再加上参数=值，想加多个参数的话，使用 & 符号进行分隔，以这个形式，可以将想要发送给服务器的数据添加到URL中

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks

// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1

// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

$.get('url', {name: '张三', age: 18}, function(res) { })
// 等价于
$.get('url?name=张三&age=18', function(res) { })

$.ajax({
    method: 'GET',
    url: '',
    data: {
        name: '张三',
        age: 18
    },
    success: function(res) { }
})
// 等价于
$.ajax({
    method: 'GET',
    url: 'url?name=张三&age=18',
    success: function(res) { }
})

URL编码与解码

URL地址中，只允许出现英文相关的字符、标点符号、数字，因此在URL地址中不允许出现中文字符

如果URL中需要包含中文这样的字符，则必须对中文字符进行编码（转义）

URL编码原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符

URL编码原则的通俗理解：使用英文字符去表示非英文字符

    http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
    // 经过 URL 编码之后，URL 地址变成了以下格式：
    http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0
    //     西            游            记
    // %E8%A5%BF     %E6%B8%B8     %E8%AE%B0

对URL进行解码

浏览器提供了URL编码与解码的API，分别是：

encodeURL() 编码的函数

    console.log(encodeURI('程序员'))
    // 输出字符串：%E7%A8%8B%E5%BA%8F%E5%91%98

decodeURL() 解码的函数

    console.log(decodeURI('%E7%A8%8B%E5%BA%8F'))
    // 输出字符串：程序

使用 xhr 发起 POST 请求

1. 创建 xhr 对象

        // 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest()

2. 调用 xhr.open() 函数

        // 2. 调用 open 函数，指定请求方式与 URL 地址
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')

3. 设置 Content-Type属性（固定写法）

        // 3. 设置 Content-Type属性（固定写法）
        xhr.setReuestHeader('Content-Type', 'application/x-www-form-urlencoded')

4. 调用 xhr.send() 函数，同时指定要发送的数据

        // 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
        xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')

5. 监听 xhr.onreadystatechange 事件

        // 4. 监听 onreadystatechange 事件
        xhr.onreadystatechange = function () {
            // 5.1. 监听 xhr 对象的请求状态 readyState； 与服务器响应 status
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 5.2. 打印服务器响应回来的数据
                console.log(xhr.responseText);
            }
        }