Ajax，jquery，axios，jsonp，http协议
一. 前置知识
1. 什么是资源
网页中常见的资源：文字内容，Image图片，Audio音频，Video视频
数据也是资源，网页中的数据，也是服务器对外提供的一种资源。如股票数据，各行业排行榜等。
HTML是网页的骨架，CSS是网页的颜值，JavaScript是网页的行为，数据，则是网页的灵魂。
如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象
XMLHttpRequest（简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。
最简单的用法：var xhrObj=new XMLHttpRequest()
2. 什么是服务器
上网的本质目的：通过互联网的形式来获取和消费资源
服务器：上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
客户端：在上网过程中，负责获取和消费资源的电脑，叫做客户端。
3. 什么是URL
URL地址：URL中文叫统一资源定位符（简称网址）用于标识互联网上每个资源的唯一存放位置。
浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
URL地址的组成部分：
1. 客户端与服务器之间的通信协议
2. 存有该资源的服务器名称
3. 资源在服务器上具体的存放位置
端口号的作用：标记区分服务器里不同的服务程序。
什么是Web服务程序：提供网上信息浏览的程序代码
4. 什么是URL编码
URL地址中，只允许出现英文相关的字母，标点符号，数字，因此，在URL地址中不允许出现中文字符。如果URL中需要包含中午这样的字符，则必须对中文字符进行编码（转义）
URL编码的原则：使用安全的字符（没有特殊用途或特殊意义的可打印字符）去表示那些不安全的字符。
URL编码原则的通俗理解：使用英文字符去表示非英文字符。
对URL进行编码和解码
浏览器提供了URL编码和解码的API，分别是：
enCodeURI()编码的函数，decodeURI()解码的函数
注意：由于浏览器会自动对URL地址进行编码操作，因此，大多数情况下，程序员不需要关心URL地址的编码与解码操作。
4. 客户端与服务器如何通信
客户端与服务器的通信过程
注意：
- 客户端与服务器之间的通信过程，分为请求—处理—响应三个步骤
- 网页中的每一个资源，都是通过请求—处理—响应的方式从服务器获取回来的
5. 如何利用开发者工具
基于浏览器的开发者工具——分析通信过程
1. 打开chrome浏览器
2. ctrl+shift+i打开chrome的开发者工具
3. 切换到Network面板
4. 选中Doc页签
5. 刷新页面，分析客户端与服务器的通信过程
6. 资源的请求方式
客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为get和post请求。
1. get请求通常用于获取服务器端资源（向服务器要资源）
例如：根据URL地址，从服务器获取HTML文件，css文件，js文件，图片文件，数据资源等
2. post请求通常用于向服务器提交数据（往服务器发送资源）
例如：登录时向服务器提交的登录信息，注册时向服务器提交的注册信息，添加用户时向服务器提交的用户信息等各种数据提交操作。
7. 什么是接口
使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。
同时，每个接口必须有请求方式。
例如：
http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口（GET请求）
http://www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）
8. 如何使用接口测试工具
为了验证接口能否被正常访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和调试。
下载并安装PostMan的官方下载网址http://www.getpostman.com/downloads/，下载所需的安装程序后，直接安装即可。
1. 使用PostMan测试POST接口
选择请求的方式
填写请求的URL地址
选择Body面板并勾选数据格式
填写要发送到服务器的数据
点击Send按钮发起POST请求
查看服务器响应的结果
2. 使用PostMan测试GET接口
选择请求的方式
填写请求的URL地址
填写请求的参数
点击Send按钮发起GET请求
查看服务器响应的结果
9. 什么是接口文档
接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。
好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
接口文档的组成部分
1. 接口名称：用来标识各个接口的简单说明，比如是登录接口，还是获取图书列表接口等
2. 接口URL：接口的调用地址
3. 调用方式：接口的调用方式，如GET或POST
4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称，参数类型，是否必选，参数说明这4项内容。
5. 响应格式：接口的返回值的详细描述。一般包含数据名称，数据类型，说明3项内容。
6. 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。
10. 接口文档示例
| 图书列表 |
|||
| 接口URL：http://www.liulongbin.top:3006/api/getbooks |
|||
| 调用方式：GET |
|||
| 参数格式： |
|||
| 参数名称 |
参数类型 |
是否必选 |
参数说明 |
| id |
Number |
否 |
图书id |
| bookname |
String |
否 |
图书名称 |
| author |
String |
否 |
作者 |
| publicher |
String |
否 |
出版社 |
| 响应格式 |
|||
| 数据名称 |
数据类型 |
说明 |
|
| status |
Number |
200成功；500失败； |
|
| msg |
String |
对status字段的详细说明 |
|
| data |
Array |
图书列表 |
|
| +id |
Number |
图书id |
|
| +bookname |
String |
图书名称 |
|
| +author |
String |
作者 |
|
| +publisher |
String |
出版社 |
|
二. 初识ajax
1. Ajax的定义
Ajax的全称是Asynchronous Javascript And XML（异步JavaScript和XML）
通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax
之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是，Ajax能让我们轻松实现网页与服务器之间的数据交互。
2. Ajax的典型应用场景
1. 用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用。
2. 搜索提示：当输入搜索关键字时，通过Ajax的形式，动态加载搜索提示列表。
3. 数据分页显示：当点击页码值的时候，通过Ajax的形式，根据页码值动态刷新表格的数据。
4. 数据的增删改查：数据的添加，删除，修改，查询操作，都需要通过ajax的形式，来实现数据的交互。
3. XMLHttpRequest的基本使用
1. 什么是XMLHttpRequest
XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来的。
2. 使用xhr发起GET请求
步骤：
//1.创建xhr对象
let xhr=new XMLHttpRequest()
//2.调用xhr.open()函数
xhr.open(‘GET’, ’http://www.liulongbin.top:3006/api/getbooks’)
//3.调用xhr.send()函数
xhr.send()
//4.监听xhr.onreadystatechange事件
xhr.onreadystatechange = function () {
//4.1 监听xhr对象的请求状态readyState;与服务器响应的状态status
if( xhr.readyState ===4 && xhr.status === 200) {
//4.2 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}3. xhr发起带参数的GET请求
使用xhr对象发起带参数的GET请求时，只需在调用xhr.open期间，为URL地址指定参数即可：
xhr.open(‘GET’,’http://www.liulongbin.top:3006/api/getbools?id=1’)这种在URL地址后面拼接的参数，叫做查询字符串。
4. 使用xhr发起POST请求
步骤：
//1. 创建xhr对象
let xhr = new XMLHttpRequest()
//2. 调用xhr.open()函数
xhr.open(‘POST’, ‘http://www.liulongbin.top:3006/api/addbook’)
//3. 设置Content-Type属性（固定写法）
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)
//4. 调用xhr.send()函数，同时将数据以查询字符串的形式，提交给服务器。
xhr.send(‘bookname=水浒传&author=施耐庵&publisher=天津出版社’)
//5. 监听xhr.onreadystatechange事件
xhr.onreadystatechange = function () {
if( xhr.readyState ===4 && xhr.status === 200) {
//4.2 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}4. xhr对象的readyState属性
XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个：
| 值 |
状态 |
描述 |
| 0 |
UNSENT |
XMLHttpRequest对象已经被创建，但尚未调用open方法 |
| 1 |
OPENED |
open()方法已经被调用 |
| 2 |
HEADERS_RECEIVED |
send方法已经被调用，响应头也已经被接收 |
| 3 |
LOADING |
数据接收中，此时response属性中已经包含部分数据 |
| 4 |
DONE |
Ajax请求完成，这意味着数据传输已经彻底完成或失败 |
5. xhr——查询参数
查询字符串（URL查询参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）
格式：将英文的?放在URL的末尾，然后加上参数=值，想加上多个参数的话，使用&符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中。
GET请求携带参数的本质
无论使用$.ajax()，还是使用$.get()，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的。
查询参数原理要携带的位置和语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2原生XHR需要自己在URL后面携带查询参数字符串，没有axios帮助我们把params参数拼接到url字符串后面了。
但是，多个查询参数，如果自己拼接很麻烦，这里用URLSearchParams把参数对象转化成“参数名=值&参数名=值”格式的字符串。
// 1. 创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({
参数名1: 值1,
参数名2: 值2
})
// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()
// 结果：参数名1=值1&参数名2=值26. xhr——数据提交(请求参数)
没有 axios 帮我们了，我们需要自己设置请求头 Content-Type：application/json，来告诉服务器端，我们发过去的内容类型是 JSON 字符串，让他转成对应数据结构取值使用。
没有 axios 了，我们前端要传递的请求体数据，也没人帮我把 JS 对象转成 JSON 字符串了，需要我们自己转换。
xhr如何提交请求体数据
在 send 中携带请求体数据，要按照后端要求的内容类型携带
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
console.log(xhr.response)
})
// 1. 告诉服务器，我传递的内容类型，是 JSON 字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 2. 准备数据并转成 JSON 字符串
const user = { username: 'itheima007', password: '7654321' }
const userStr = JSON.stringify(user)
// 3. 发送请求体数据
xhr.send(userStr)7. Promise和xhr的结合使用
/**
* 目标：使用Promise管理XHR请求省份列表
* 1. 创建Promise对象
* 2. 执行XHR异步代码，获取省份列表
* 3. 关联成功或失败函数，做后续处理
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {
// 2. 执行XHR异步代码，获取省份列表
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/province')
xhr.addEventListener('loadend', () => {
// xhr如何判断响应成功还是失败的？
// 2xx开头的都是成功响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
xhr.send()
})
// 3. 关联成功或失败函数，做后续处理
p.then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = result.list.join('
')
}).catch(error => {
// 错误对象要用console.dir详细打印
console.dir(error)
// 服务器返回错误提示消息，插入到p标签显示
document.querySelector('.my-p').innerHTML = error.message
})8. Promise和xhr封装myAxios
基于 Promise 和 XHR 封装 myAxios 函数
function myAxios(config) {
return new Promise((resolve, reject) => {
// XHR 请求
// 调用成功/失败的处理程序
})
}
myAxios({
url: '目标资源地址'
}).then(result => {
}).catch(error => {
})1. 封装简易axios获取省份列表
自己封装的 myAxios 如何设置默认请求方法 GET?
config.method 判断有值就用，无值用‘GET’方法
/**
* 目标：封装_简易axios函数_获取省份列表
* 1. 定义myAxios函数，接收配置对象，返回Promise对象
* 2. 发起XHR请求，默认请求方法为GET
* 3. 调用成功/失败的处理程序
* 4. 使用myAxios函数，获取省份列表展示
*/
// 1. 定义myAxios函数，接收配置对象，返回Promise对象
function myAxios(config) {
return new Promise((resolve, reject) => {
// 2. 发起XHR请求，默认请求方法为GET
const xhr = new XMLHttpRequest()
xhr.open(config.method || 'GET', config.url)
xhr.addEventListener('loadend', () => {
// 3. 调用成功/失败的处理程序
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
xhr.send()
})
}
// 4. 使用myAxios函数，获取省份列表展示
myAxios({
url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = result.list.join('
')
}).catch(error => {
console.log(error)
document.querySelector('.my-p').innerHTML = error.message
})2. 封装简易axios获取地区列表
1. 修改 myAxios 函数支持传递查询参数
2. myAxios 函数调用后，判断 params 选项
3. 基于 URLSearchParams 转换查询参数字符串
function myAxios(config) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
// 1. 判断有params选项，携带查询参数
if (config.params) {
// 2. 使用URLSearchParams转换，并携带到url上
const paramsObj = new URLSearchParams(config.params)
const queryString = paramsObj.toString()
// 把查询参数字符串，拼接在url？后面
config.url += `?${queryString}`
}
xhr.open(config.method || 'GET', config.url)
xhr.addEventListener('loadend', () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
xhr.send()
})
}
// 3. 使用myAxios函数，获取地区列表
myAxios({
url: 'http://hmajax.itheima.net/api/area',
params: {
pname: '辽宁省',
cname: '大连市'
}
}).then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = result.list.join('
')
})3. 封装简易axios注册用户
修改 myAxios 函数支持传递请求体数据，完成注册用户
1. myAxios 函数调用后，判断 data 选项
2. 转换数据类型，在 send 方法中发送
3. 使用自己封装的 myAxios 函数完成注册用户功能
function myAxios(config) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
if (config.params) {
const paramsObj = new URLSearchParams(config.params)
const queryString = paramsObj.toString()
config.url += `?${queryString}`
}
xhr.open(config.method || 'GET', config.url)
xhr.addEventListener('loadend', () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
// 1. 判断有data选项，携带请求体
if (config.data) {
// 2. 转换数据类型，在send中发送
const jsonStr = JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(jsonStr)
} else {
// 如果没有请求体数据，正常的发起请求
xhr.send()
}
})
}
document.querySelector('.reg-btn').addEventListener('click', () => {
// 3. 使用myAxios函数，完成注册用户
myAxios({
url: 'http://hmajax.itheima.net/api/register',
method: 'POST',
data: {
username: 'itheima999',
password: '666666'
}
}).then(result => {
console.log(result)
}).catch(error => {
console.dir(error)
})
})三. 旧版XMLHTTPRequest和新版
1. 旧版XMLHTTPRequest的缺点
1. 仅支持文本数据的传输，无法用来读取和上传文件
2. 传送和接收数据时，没有进度信息，只能提示有没有完成。
2. XMLHttpRequest Level2的新功能
1. 可以设置HTTP请求的时限
2. 可以使用FormData对象管理表单数据
3. 可以上传文件
4. 可以获得数据传输的进度信息
1. 设置HTTP请求时限
有时，Ajax操作很耗时，而且无法预知要花多少时间。
新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限：
xhr.timeout = 3000
将等待3000毫秒，过了这个时限，就自动停止HTTP请求。
与之配套的还有一个timeout事件，用来指定回调函数。
xhr.ontimeout = function(event){
alert(‘请求超时’)
}
2. FormDate对象管理表单数据
Ajax操作往往用来提交表单数据。
为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单操作。
//1. 新建FormData对象
let fd = new FormData()
//2. 为FormData添加表单项
fd.append(‘uname’, ‘zs’)
fd.append(‘upwd’, ‘123456’)
//3. 创建XHR对象
let xhr = new XMLHttpRequest()
//4. 指定请求类型与URL地址
xhr.open(‘POST’, ‘http://www.liulongbin.top:3006/api/formdata’)
//5. 直接提交FormData对象，这与提交网页表单的效果，完全一样
xhr.send(fd)3. 上传文件
新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。
实现步骤：
1. 定义UI结构
2. 验证是否选择了文件
3. 向FormData中追加文件
4. 使用xhr发起上传文件的请求
5. 监听onreadystatechange事件
4. 显示文件上传进度
新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度。
语法格式如下：
5. 监听上传完成的事件
四. from表单与模板引擎
1. 什么是表单
表单在网页中主要负责数据采集功能。
HTML中的