---

内容

• XMLHttpRequest的基本使用；
• 数据交换格式；
• 封装自己的Ajax函数；
• XMLHttpRequest Level2的新特性；
• jQuery高级用法；
• axios；

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、XMLHttpRequest的基本使用

1. 什么是XMLHttpRequest

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。

思考：能否直接使用xhr对象发起Ajax请求？

2. 使用xhr发起GET请求

步骤：

1. 创建 xhr 对象；
2. 调用 xhr.open() 函数（创建请求）；
3. 调用 xhr.send() 函数（发起Ajax请求）；
4. 监听 xhr.onreadystatechange 事件（拿到服务器响应回来的数据）。

代码示例：

 <script>// 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 ；与服务器响应的状态 statusif  (xhr.readyState  ===  4  &&  xhr.status  ===  200)  {// 4.2 打印服务器响应回来的数据console.log(xhr.responseText)}}</script>

if(xhr.readyState === 4 && xhr.status === 200) ：判断条件的固定写法，要记住。如果条件成立，表示数据获取成功。
注意：判断条件里的status和响应回来的数据里的status属性并不是同一个。

注意区分：

监听状态	描述
readyState	请求状态
status	服务器响应状态

3. xhr对象的readyState属性

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

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

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

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

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

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

5. 查询字符串

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=西游记

5.2 get请求携带参数的本质

无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

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

6. URL编码与解码

6.1 什么是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

编码中，用3组“%XX” 来表示一个中文字符

6.2 如何对URL进行编码与解码

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

• encodeURI() 编码的函数；
• decodeURI() 解码的函数。

代码示例：

 encodeURI('菜鸟程序员')// 输出字符串  %E8%8F%9C%E9%B8%9F%E7%A8%8B%E5%BA%8F%E5%91%98decodeURI('%E8%8F%9C%E9%B8%9F')// 输出字符串  菜鸟

6.3 URL编码的注意事项

由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。

更多关于 URL 编码的知识，请参考如下博客：
https://blog.csdn.net/Lxd_0111/article/details/78028889

7. 使用xhr发起post请求

步骤：

1. 创建 xhr 对象；
2. 调用 xhr.open() 函数；
3. 设置 Content-Type 属性（固定写法）；
4. 调用 xhr.send()函数，同时指定要发送的数据；
5. 监听 xhr.onreadystatechange 事件

代码示例：

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}
}

二、数据交换格式

1. 什么是数据交换格式

数据交换格式，就是 服务器端 与 客户端 之间进行数据传输与交换的格式。

前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，重点学习的数据交换格式就是 JSON。

2.XML

2.1 什么是XML

XML 的英文全称是 EXtensible Markup Language（即可扩展标记语言）。XML 和 HTML 类似，也是一种标记语言。

2.2 XML和HTML的区别

XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。

• HTML 被设计用来描述网页上的内容，是网页内容的载体；
• XML 被设计用来传输和存储数据，是数据的载体。

2.3 XML的缺点

① XML 格式臃肿，和数据无关的代码多，体积大，传输效率低；
② 在 Javascript 中解析 XML 比较麻烦。

代码如下（示例）：

<note><to>Jack</to><from>David</from><heading>通知</heading><body>晚上KTV</body>
</note>

3. JOSN

3.1 什么是JOSN

概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。

作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。

现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。

3.2 JSON的两种结构

JSON 就是用字符串来表示 Javascript 的 对象 和 数组。所以，JSON 中包含对象和数组两种结构，通过这两种结构的 相互嵌套，可以表示各种复杂的数据结构。

对象结构：对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须使用英文的 双引号 包裹字符串，value 的数据类型必须是数字、字符串、布尔值、null、数组、对象6种类型。

数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型必须是数字、字符串、布尔值、null、数组、对象6种类型。

代码示例：

[ "java", "python", "php" ]
[ 100, 200, 300.5 ]
[ true, false, null ]
[ { "name": "Jack", "age": 20}, { "name": "David", "age": 30} ]
[ [ "苹果", "香蕉", "桔子" ], [ 4, 50, 5 ] ]

3.3 JOSN语法注意事项

• 属性名必须使用双引号包裹；
• 字符串类型的值必须使用双引号包裹；
• JSON 中不允许使用单引号表示字符串；
• JSON 中不能写注释；
• JSON 的最外层必须是对象或数组格式；
• 不能使用 undefined 或函数作为 JSON 的值。

JSON 的作用：在计算机与网络之间存储和传输数据。
JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

3.4 JSON和JS的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。例如：

//这是对象
var obj = {a: 'Hello', b: 'World'}//这是 JSON 字符串，本质是一个字符串
var json = '{"a": "Hello", "b": "World"}'

3.5 JSON和JS的互转

JSON 字符串 转 JS 对象，用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}

JS 对象 转 JSON 字符串，用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'

3.6 序列化和反序列化

• 把数据对象转换为字符串的过程，叫做序列化；

  • 例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

• 把字符串转换为数据对象的过程，叫做反序列化.

  • 例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

3.7 JSON.parse的应用

示例代码：

 <script>var xhr = new XMLHttpRequest();xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);console.log(typeof xhr.responseText);}}</script>

xhr.responseText得到的结果是JSON格式的字符串，并且用typyof检查，也确实是字符串格式。如图：

因为字符串不便于操作，就这需要用到JOSN.parse()将这个结果转换为对象再进行操作。

// 将字符串转换为对象
var result=JSON.parse(xhr.responseText);
console.log(result);

转换成了对象：

三. 封装自己的Ajax函数

1.要实现的效果

<!-- 1. 导入自定义的ajax函数库 -->
<script src="./itheima.js"></script>
<script>// 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求itheima({method: '请求类型',url: '请求地址',data: { /* 请求参数对象 */ },success: function(res) { // 成功的回调函数console.log(res)     // 打印数据}})
</script>

2. 定义options参数选项

itheima() 函数是自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：

属性	描述
method	请求的类型
url	请求的 URL 地址
data	请求携带的数据
success	请求成功之后的回调函数

3.处理data参数

需要把 data 对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义 resolveData 函数如下：

/*** 处理 data 参数* @param {data} 需要发送到服务器的数据* @returns {string} 返回拼接好的查询字符串 name=zs&age=10*/
function resolveData(data) {var arr = []for (var k in data) {arr.push(k + '=' + data[k])}return arr.join('&')
}

4. 定义itheima()函数

在 itheima() 函数中，需要创建 xhr 对象，并监听 onreadystatechange 事件：

代码示例：

function itheima(options) {var xhr = new XMLHttpRequest()// 拼接查询字符串var qs = resolveData(options.data)// 监听请求状态改变的事件xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var result = JSON.parse(xhr.responseText)options.success(result)}}
}

解释：
1） resolveData(options.data)：把外界传递过来的参数对象，转换为查询字符串
2）xhr.responseText是服务器响应回来的数据，但它是一个JSON格式的字符串，我们需要用JSON.parse()函数将它转换为JS对象。再执行success回调函数（响应成功后的一些操作都在回调函数里）。

注：
如果POST要提交参数，不是在url后面去拼接查询字符串，而是在send()期间去指定参数

5. 判断请求的类型

不同的请求类型，对应 xhr对象的不同操作，因此需要对请求类型进行 if … else … 的判断。

代码示例：

 if (options.method.toUpperCase() === 'GET') {// 发起 GET 请求xhr.open(options.method, options.url + '?' + qs)xhr.send()} else if (options.method.toUpperCase() === 'POST') {// 发起 POST 请求xhr.open(options.method, options.url)xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send(qs)}

根据options.method的类型（get或post），

• 如果是GET请求，就将要提交的参数直接放到url地址的后面，然后发起请求xhr.send()；
• 如果是POST请求，就将用户提交的参数在send期间发送到服务器。

toUpperCase()：转换成大写

封装的Ajax itheima函数完整代码如下：

function resolveData(data) {var arr = [];for (var k in data) {var str = k + '=' + data[k]arr.push(str)}return arr.join('&')
}// var res = resolveData({ name: '张三疯', age: 180 })
// console.log(res);function itheima(options) {var xhr = new XMLHttpRequest();// 把外界传递过来的参数对象，转换为查询字符串var qs = resolveData(options.data);// 把外界传递过来的参数对象，转换为查询字符串var qs = resolveData(options.data);if (options.method.toUpperCase() === 'GET') {// 发起GET请求xhr.open(options.method, options.url + '?' + qs);xhr.send();} else if (options.method.toUpperCase() === 'POST') {// 发起POST请求// 如果`POST`要提交参数，不是在`url`后面去拼接查询字符串，而是在`send()`期间去指定参数xhr.open(options.method, options.url);// 设置Content-Type属性xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send(qs)}xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// xhr.responseText是服务器响应回来的数据，但它是一个JSON格式的字符串，需要转换为JS对象var result = JSON.parse(xhr.responseText);options.success(result)}}
}

封装itheima函数的调用

<script>// itheima({//     method: 'GET',//     url: 'http://www.liulongbin.top:3006/api/getbooks',//     data: {//         id: 1//     },//     success: function(res) {//         console.log(res);//     }// })itheima({method: 'post',url: 'http://www.liulongbin.top:3006/api/addbook',data: {bookname: '三国演义',author: '罗贯中',publisher: '四川人民出版社'},// 监听success的回调success: function(res) {console.log(res);}})</script>

控制台输出：

四. XMLHttpRequest Level2的新特性

1. 认识XMLHttpRequest Level2

1.1 旧版XMLHttpRequest的缺点

• 只支持文本数据的传输，无法用来读取和上传文件；
• 传送和接收数据时，没有进度信息，只能提示有没有完成。

1.2 XMLHttpRequest Level2的新功能

• 可以设置 HTTP 请求的时限；
• 提供新的 js 对象 FormData 管理表单数据（旧版只能使用form标签）；
• 可以上传文件；
• 可以获得数据传输的进度信息；

2. 设置HTTP请求时限

有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限。

代码示例：

// 设置超时时间
xhr.timeout = 3000;
// 超时后的处理函数
xhr.ontimeout = function() {console.log('请求超时！');
}

此语句，将最长等待时间设为了 3000 毫秒。过此时限，就自动停止HTTP请求。与之配套的还有 timeout 事件，用来指定回调函数：

本案例完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var xhr = new XMLHttpRequest();// 设置超时时间xhr.timeout = 3000;// 超时后的处理函数xhr.ontimeout = function() {console.log('请求超时！');}xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// responseText获得字符串形式的的响应数据console.log(xhr.responseText);}}</script>
</body></html>

1）readyState 属性返回一个 XMLHttpRequest 代表当前所处的状态（UNSENT、 OPENED、HEADERS_RECEIVED、 LOADING、DONE）；
2）responseText：获得字符串形式的的响应数据。也可以写作如下格式：

document.getElementById("myDiv").innerHTML=xhr.responseText;

3. FormData对象管理表单数据

主要功能：

• 提交表单数据；
• 获取网页表单的值。

Ajax 操作常用来提交表单数据。为了方便表单处理，HTML5 新增了 FormData 对象，可以模拟表单操作：

 // 1. 新建 FormData 对象var fd = new FormData()// 2. 为 FormData 添加表单项fd.append('uname', 'zs')fd.append('upwd', '123456')// 3. 创建 XHR 对象var xhr = new XMLHttpRequest()// 4. 指定请求类型与URL地址xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')// 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样xhr.send(fd)

FormData对象也可以用来获取网页表单的值，示例代码如下：

// 获取网页表单元素
var  form  =  document.querySelector('#form1')// 监听表单元素的 submit 事件
form.addEventListener('submit',  function(e)  {e.preventDefault()// 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中var  fd  =  new  FormData(form)var  xhr  =  new  XMLHttpRequest()xhr.open('POST',  'http://www.liulongbin.top:3006/api/formdata')xhr.send(fd)xhr.onreadystatechange  =   function()  {}
})

还可以在创建一个包含Form表单数据的FormData对象之后，并且在发送请求之前，附加额外的数据到FormData对象里。例如：

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

这样就可以在发送请求之前，自由地附加不一定是用户编辑的字段到表单数据里。

注意：如果FormData对象是通过表单创建的，则表单中指定的请求方式会被应用到方法open()中 。

4. 上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。

实现步骤：

1. 定义 UI 结构；
2. 验证是否选择了文件；
3. 向 FormData 中追加文件；
4. 使用 xhr 发起上传文件的请求；
5. 监听 onreadystatechange 事件

4.1 定义UI结构

代码示例：

 <!-- 1. 文件选择框 --><input type="file"  id="file1"  /><!-- 2. 上传按钮 --><button id="btnUpload">上传文件</button><br /><!-- 3. 显示上传到服务器上的图片 --><img src=""  alt=""  id="img"  width="800"  />

4.2 验证是否选择文件

代码示例：

// 1. 获取上传文件的按钮var btnUpload = document.querySelector('#btnUpload')// 2. 为按钮添加 click 事件监听btnUpload.addEventListener('click', function() {// 3. 获取到选择的文件列表var files = document.querySelector('#file1').filesif (files.length <= 0) {return alert('请选择要上传的文件！')}// ...后面的业务逻辑})

4.3 向FormData中追加文件

代码示例：

// 1. 创建 FormData 对象var fd = new FormData()// 2. 向 FormData 中追加文件fd.append('avatar', files[0])

4.4 使用 xhr 发起上传文件的请求

代码示例：

// 1. 创建 xhr 对象var xhr = new XMLHttpRequest()// 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POSTxhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')// 3. 发起请求xhr.send(fd)

上传文件必须用POST请求。

4.5 监听onreadystatechange事件

代码示例：

 xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status === 200) {var data = JSON.parse(xhr.responseText);if (data.status === 200) {// 上传成功document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url} else {// 上传失败alert('图片上传失败' + data.message);}}}

5 显示文件上传进度

新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。语法格式如下：

// 创建 XHR 对象
var  xhr  =  new  XMLHttpRequest()// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress  =   function(e)  {/ e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度if  (e.lengthComputable)  {// e.loaded 已传输的字节// e.total  需传输的总字节var  percentComplete  =  Math.ceil((e.loaded  /  e.total)  *  100)}
}

Math.ceil 是上取整。在xhr.upload.onprogress 事件中，事件对象有3个重要属性：

属性	描述
e.lengthComputable	布尔值，表示当前上传的资源是否具有可计算的长度
e.loaded	已传输的字节
e.total	需传输的总字节

5.1 导入需要的库

接下来，需要添加一个进度条，

1. 在bootsrap官网找到“组件”→“进度条”）(地址：https://v3.bootcss.com/components/#progress)；
   
2. 复制选中的进度条UI结构；

<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">//<span class="sr-only">45% Complete</span>45%</div>
</div>

上面进度条的UI结构里，要将45% 外面包裹的p标签删除(即只留下百分比)。

1. 导入jQuery

代码示例：

<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>

接下来，需要将计算出来的百分比percentComplete = Math.ceil((e.loaded / e.total) * 100)，设置到进度条上，此时就进行jQuery的DOM操作。

5.2 基于Bootstrap渲染进度条

1）重置UI结构中的进度为 0%
代码示例：

<!-- 进度条 -->
<div class="progress"  style="width: 500px; margin: 10px 0;">   <div class="progress-bar progress-bar-info progress-bar-striped active"  id="percent"  style="width: 0%">0%</div>
</div>

5.3 监听上传进度的事件

代码示例：

xhr.upload.onprogress  =   function(e)  {if  (e.lengthComputable)  {// 1. 计算出当前上传进度的百分比var  percentComplete  =  Math.ceil((e.loaded  /  e.total)  *  100)$('#percent')// 2. 设置进度条的宽度.attr('style',  'width:'  +  percentComplete  +  '%')// 3. 显示当前的上传进度百分比html(percentComplete  +  '%')}
}

5.4 监听上传完成的事件

代码示例：

xhr.upload.onload  =   function()  {$('#percent')// 移除上传中的类样式removeClass()// 添加上传完成的类样式addClass('progress-bar progress-bar-success')
}

五. jQuery高级用法

1. jQuery实现文件上传

1.1 定义UI结构

代码示例：

<!-- 1. 文件选择框 -->
<input type="file" id="file1">
<!-- 2. 上传文件按钮 -->
<button id="btnUpload">上传</button>
<!-- 3. img 标签，显示上传成功以后的图片 -->
<img src="" alt="" id="img" width:300/>

1.2 验证是否选择文件

引入js文件：

<script src="./lib/jquery.js"></script>

验证文件：

$('#btnUpload').on('click', function() {// 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表var files = $('#file1')[0].files;// 2. 判断是否选择了文件if (files.length <= 0) {return alert('请选择后上传')}var fd=new FormData();
})

jQuery对象后面跟上[0]，即可转换为DOM对象

1.3 向FormData中追加文件

 var fd = new FormData()// 将用户选择的文件，添加到 FormData 中
fd.append('avatar', files[0])

1.4 上传文件

$.ajax({method: 'POST',url: 'http://www.liulongbin.top:3006/api/upload/avatar',data: fd,// 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值contentType: false,// 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器processData: false,success: function(res) {console.log(res)}})

注： 上传文件必须用 ajax， 设置contentType: false 和 processData: false。

本案例完整代码：网盘源码（提取码：7j6v）

2. jQuery实现loading效果

2.1 ajaxStart(callback)

Ajax 请求 开始 时，执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果。

语法格式如下：

 // 自 jQuery 版本 1.8 起，该方法只能被附加到文档$(document).ajaxStart(function()  {$('#loading').show()})

注意：$(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。

2.2 ajaxStop(callback)

Ajax 请求 结束 时，执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果。

语法格式如下：

    // 自 jQuery 版本 1.8 起，该方法只能被附加到文档$(document).ajaxStop(function()  {$('#loading').hide()})

2.3 案例-计算文件上传进度

案例源码：网盘下载（提取码: sxqf）

六. axios

1. 什么是axios

Axios是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest 对象，axios简单易用。
相比于 jQuery，axios 更加 轻量化，只专注于网络数据请求。

2. axios发起GET请求

axios发起get请求的语法：

axios.get('url', { params: { /*参数*/ } }).then(callback)

具体的GET请求示例如下：

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: '张三疯', age: 180 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {// res.data 是服务器返回的数据var result = res.dataconsole.log(res)
})

3. axios发起POST请求

axios发起POST请求的语法：

axios.post('url', { /*参数*/ }).then(callback)

具体的POST请求示例如下：

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {// res.data 是服务器返回的数据var result = res.dataconsole.log(result)
})

4. 直接使用axios发起请求

axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：

axios({method: '请求类型',url: '请求的URL地址',data: { /* POST数据 */ },params: { /* GET参数 */ }}) .then(callback)

4.1 直接使用axios发起GET请求

axios({method: 'GET',url: 'http://www.liulongbin.top:3006/api/get',params: { // GET 参数要通过 params 属性提供name: 'zs',age: 20}}).then(function(res) {console.log(res.data)})

4.2 直接使用axios发起POST请求

axios({method: 'POST',url: 'http://www.liulongbin.top:3006/api/post',data: { // POST 数据要通过 data 属性提供bookname: 'JavaScript从入门到放弃',price: 168}}).then(function(res) {console.log(res.data)})

---

提示

前端_网页编程 Ajax加强相关推荐

1. 前端_网页编程 Form表单与模板引擎（上）

   目录 一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...

2. 前端_网页编程 Form表单与模板引擎（下）

   目录 续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...

3. 前端_网页编程 Form表单与模板引擎（中）

   目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点 五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...

4. 前端_网页编程 HTTP协议（进阶）

   文章目录 内容 1. HTTP协议简介 1.1 什么是通信 1.1.1 现实生活中的通信 1.1.2 互联网中的通信 1.2 什么是通信协议 1.2.1 现实生活中的通信协议 1.2.2 互联网中的通 ...

5. 网页现现实理服务器没有响应,前端_网页编程 HTTP协议（进阶）

   文章目录 内容 1. HTTP协议简介 1.1 什么是通信 1.1.1 现实生活中的通信 1.1.2 互联网中的通信 1.2 什么是通信协议 1.2.1 现实生活中的通信协议 1.2.2 互联网中的通 ...

6. 前端_网页编程 跨域与JSONP- 淘宝搜索案例

   文章目录 前言 1. 要实现的UI效果 2. 实现步骤 2.1 获取用户输入的搜索关键词 2.2 建议搜索列表的函数封装 2.3 渲染建议列表的UI结构 2.3.1 定义搜索建议列表 2.3.2 定义 ...

7. 前端_网页编程 WebAPI_01

   01 - Web API 1.1. Web API介绍 1.1.1 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目 ...

8. 前端_网页编程 节流

   文章目录 前言 1.什么是节流 2.节流的应用场景 3 节流案例 - 鼠标跟随效果 3.1 渲染UI结构并美化样式 3.2 不使用节流实现鼠标跟随效果 3.3 节流阀的概念 3.4 使用节流阀实现鼠标 ...

9. 初中文化能学编程吗_网页编程课程来了，确定不来pick一下!!!|科创辅学进行时...

   KE CHUANG FU XUE 科创辅学 天天用手机,各种app 半夜不睡觉,只会网上浪 醒醒,少年,别玩了 不要再搞这些花里胡哨的东西了! 要学会用魔法打败魔法 上一周,我们跟着夏老师学习了 Ar ...

最新文章

1. UA STAT687 线性模型理论I 线性模型概述
2. Python数据结构——list
3. VF02 会计凭证过账时间
4. python基础教程：变量的使用
5. DGL教程【一】使用Cora数据集进行分类
6. MariaDB数据库日志
7. linux下mysql-5.6忘记root密码，重置root密码详细过程
8. 本文详解5G是个什么鬼，程序员都准备好了吗？
9. rxjs为什么用的人少_工伤为什么公司不怕打官司
10. layui数据可视化_空间数据可视化 GEOM
11. 混沌数学之Rössler(若斯叻)吸引子
12. Python中一定要注意的那些“坑”（三）
13. 【报告分享】Facebook IQ 2020年热门话题和趋势报告.pdf（附下载链接）
14. C++代码中执行bat文件
15. wifi rssi 计算 距离_用RSSI/TOF判断距离靠谱吗？浅谈RSSI/TOF测距优劣
16. Cocos2d-x动作（Action）详解
17. linux opendir路径_Linux opendir();readdir();chdir()使用要点
18. yahoo邮箱停止服务器,国内@yahoo.com邮箱用户不能登录的几个解决方案
19. 2013年12月北京市广播电台网络影响力排名
20. 耳机插入电脑没反应找不到realtek音频管理器

热门文章

1. jmeter php网站,jmeter实战之phpwind随机回帖/发帖
2. 计算机是如何进行时间同步的
3. Python中的特殊属性与方法
4. Mybatis介绍、jdbc操作数据库原始写法以及Mybatis架构
5. 还是畅通工程(克鲁斯卡尔算法+并查集)
6. java中LinkedList类的操作
7. node.js Express框架入门
8. Form表单中method=post/get'的区别
9. Phoenix 关联映射 Hbase表 获取不到数据，upsert hbase 列名为16进制字符
10. windows + cmake + vs2019 编程