Ajax加强

目录

1. XMLHttpRequest的基本使用

1.1 什么XMLHttpRequest

1.2 使用xhr发起GET请求

1.3 了解xhr对象的readyState属性

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

1.5 查询字符串

1.6 URL编码与解码

1.7 使用xhr发起POST请求

2. 数据交换格式

2.1 什么是数据交换格式

2.2 XML 

2.3 JSON

3. 封装自己的Ajax函数

3.1 要实现的效果 

3.2 定义options参数选项

3.3 处理data参数 

3.4 定义itheima函数

3.5 判断请求的类型 

3.6 最终演示

4. XMLHttpRequest Level2的新特性

4.1 认识XMLHttpRequest Level2 

4.2 设置HTTP请求时限 

4.3 FormData对象管理表单数据

4.4 上传文件 

4.5 显示文件上传进度

5. jQuery高级用法

5.1 jQuery实现文件上传 

 5.2 jQuery实现loading效果

 6. axios

 6.1 什么是axios

6.2 axios发起GET请求

6.4 直接使用axios发起请求 

---

#博学谷IT学习技术支持#

1. XMLHttpRequest的基本使用

1.1 什么XMLHttpRequest

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数

据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。

1.2 使用xhr发起GET请求

步骤：

创建 xhr 对象

调用 xhr.open() 函数

调用 xhr.send() 函数

监听 xhr.onreadystatechange 事件 

// 1. 创建 XHR 对象

var xhr = new XMLHttpRequest()

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

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') //

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

xhr.send()

// 4. 监听 onreadystatechange 事件

xhr.onreadystatechange = function() {    

        // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status    

        if (xhr.readyState === 4 && xhr.status === 200)  {        

                // 4.2 打印服务器响应回来的数据  responseText      

                console.log(xhr.responseText)    

        }

 }

获取的数据：

{"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"},{"id":3,"bookname":"三国演义","author":"罗贯中","publisher":"北京图书出版社"}]} 

1.3 了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求

必然处于以下状态中的一个：

值	状态	描述
0	UNSENT	XMLHttpRequest 对象已被创建，但尚未调用 open方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，响应头也已经被接收。
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据。
4	DONE	Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

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

使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可：

// ...省略不必要的代码

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

// ...省略不必要的代码 

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

1.5 查询字符串

1. 什么是查询字符串 

定义：查询字符串（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=西游记 

2. GET请求携带参数的本质 

无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数

的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器

的。

$.get('url', {name: 'zs', age: 20}, function() {})

// 等价于

$.get('url?name=zs&age=20', function() {})

$.ajax({ method: 'GET', url: 'url', data: {name: 'zs', age: 20}, success: function() {} })

// 等价于

$.ajax({ method: 'GET', url: 'url?name=zs&age=20', success: function() {} })

1.6 URL编码与解码

1. 什么是URL编码 

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

文字符。如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码&