Ajax-XMLHttpRequest 基本使用

4次阅读
没有评论

共计 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请求必然处于以下状态中的一个:

状态 描述
0 UNSENT XMLHttpRequest 对象已被创建,当尚未调用 open() 方法
1 OPENED open() 方法已被调用
2 HEADERS_RECEIVED send() 方法已被调用,响应头也已经被接收
3 LOADING 数据接收中,此时 respose 属性中已经包含部分数据
4 DONE 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);
            }
        }

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计2562字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码