Ajax，jquery，axios，jsonp，http协议
上网的本质目的：通过互联网的形式来获取和消费资源服务器：上网过程中，负责存放和对外提供资源的电脑，叫做服务器。客户端：在上网过程中，负责获取和消费资源的电脑，叫做客户端。URL地址：URL中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。URL地址的组成部分：1. 客户端与服务器之间的通信协议2. 存有该资
一. 前置知识
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('<br>')
}).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('<br>')
}).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('<br>')
})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中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。
2. 表单的组成部分
表单由三个基本部分组成：
1. 表单标签
2. 表单域（包含了文本框，密码框，隐藏域，多行文本框，复选框，单选框，下拉选择框和文件上传框等）
3. 表单按钮
3. <form>标签的属性
<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
|
属性 |
值 |
描述 |
|
action |
URL地址 |
规定当提交表单时，向何处发送表单数据 |
|
method |
get或post |
规定以何种方式把表单数据提交到action URL |
|
enctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
规定在发送表单数据之前如何对其进行编码 |
|
target |
_blank _self _parent _top framename |
规定在何处打开action URL |
action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。
当<form>表单在未指定action属性值的情况下，action的默认值为当前页面的URL地址。
注意：当提交表单后，页面会立即跳转到action属性指定的URL地址。
target属性的可选值有五个
|
值 |
描述 |
|
_blank |
在新窗口中打开 |
|
_self |
默认。在相同的框架中打开 |
|
_parent |
在父框架集中打开 |
|
_top |
在整个窗口中打开 |
|
framename |
在指定的框架中打开 |
method属性的可选值有2个，分别是get和post
默认情况下，method的值为get，表示通过URL地址的形式，把表单数据提交到action URL
post是通过一种隐藏的方式来提交数据的。
注意：
get方式适合用来提交少量的，简单的数据，post方式适合用来提交大量的，复杂的，或包含文件上传的数据。
在实际开发中，<form>表单的post提交方式用的最多，很少用get。例如登录，注册，添加数据等表单操作，都需要使用post方式来提交表单。
enctype属性的可选值有3个
|
值 |
描述 |
|
application/x-www-form-urlencoded |
在发送前编码所有字符（默认） |
|
multipart/form-data |
不对字符编码 在使用包含文件上传控件的表单时，必须使用该值 |
|
text/plain |
空格转换为”+”加号。但不对特殊字符编码 |
4. form-serialize 插件
form-serialize 插件，快速收集目标表单范围内表单元素的值
1. 先引入插件到自己的网页中，2. 准备form和表单元素的name属性，3.使用serialize函数，传入form表单和配置对象。
form-serialize 插件语法：
1. 引入 form-serialize 插件到自己网页中
2. 使用 serialize 函数
参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
参数2：配置对象
hash：true - 收集出来的是一个 JS 对象结构 false - 收集出来的是一个查询字符串格式
empty：true - 收集空值 false - 不收集空值
5. 表单的同步提交
通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。
1. 表单同步提交的缺点
1. <form>表单同步提交后，整个页面都会发生跳转，跳转到action URL所指向的地址，用户体验很差。
2. <form>表单同步提交后，页面之前的状态和数据会丢失。
2. 解决表单同步提交的缺点
解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器。
6. 通过Ajax提交表单数据
1. 监听表单提交事件
在jQuery中，可以使用两种方式，监听到表单的提交事件
2. 阻止表单的默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转
3. 用jQuery快速获取表单数据
serialize()函数
为了简化表单中数据的的获取操作，jQuery提供了serialize()函数，其语法格式如下：
$(selector).serialize()
serialize()函数的好处：可以一次性获取到表单中的所有的数据。
注意：在使用serialize()函数快速获取表单数据时，必须为每个表单元素添加name属性
7. 什么是模板引擎
模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
8. 模板引擎的好处
1. 减少了字符串的拼接操作
2. 使代码结构更清晰
3. 使代码更易于阅读和维护
9. art-template模板引擎
art-template是一个简约，超快的模板引擎。
中文官网首页为：art-template
1. art-template的使用步骤
1. 导入art-template
2. 定义数据
3. 定义模板
4. 调用template函数
5. 渲染HTML结构
2. art-template标准语法
art-template提供了{{}}这种语法格式，在{{}}内可以进行变量输出，或循环数组等操作，这种{{}}语法在art-template中被称为标准语法。
3. 标准语法-输出
{{value}}
{{obj.key}}
{{obj[‘key’]}}
{{a?b:c}}}
{{a||b}}
{{a+b}}
在{{}}语法中，可以进行变量的输出，对象属性的输出，三元表达式的输出，逻辑或输出，加减乘除等表达式输出。
4. 标准语法-原文输出
{{@ value}}
如果要输出的value值中，包含了HTML结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。
5. 标准语法-条件输出
如果要实现条件输出，则可以在{{}}中使用if...else if.../if的方式，进行按需输出。
{{if value}}按需输出的内容{{/if}}
{{if v1}}按需输出的内容{{else if v2}} 按需输出的内容 {{/if}}
6. 标准语法-循环输出
如果要实现循环输出，则可以在{{}}内，通过each语法循环数组，当前循环的索引使用$index进行访问，当前的循环项使用$value进行访问。
{{each arr}}
{{$index}} {{$value}}
{{/each}}
7. 标准语法-过滤器
过滤器的本质：就是一个function处理函数
{{value|filterName}}
过滤器的语法类似管道操作符。它的上一个输出作为下一个输入。
定义过滤器的基本语法：
template.defaults.imports.filterName=function(value){
/*return 处理的结果*/
} 
10. 模板引擎的实现原理
正则与字符串操作
基本语法
exec()函数用于检索字符串中的正则表达式的匹配
如果字符串中有匹配的值，则返回该匹配值，否则返回null。RegExpObject.exec(string)
示例：
var str=’hello’
var pattern=/o/
/*输出的结果[“o”,index:4,input:”hello”,groups:undefined]*/
console.log(pattern.exec(str))分组
正则表达式中()包起来的内容表示一个分组，可以通过分组来提取自己想要的内容。
字符串的replace函数，replace()函数用于在字符串中用一些字符替换另一些字符，语法格式如下：
let result=’123456’.replace(‘123’, ’abc’)
//得到的result的值为字符串’abc456’多次replace，使用while循环replace
replace替换为真值
实现简易的模板引擎
实现步骤：
1. 定义模板引擎
2. 预调用模板引擎
3. 封装template函数
五. 什么是数据交换格式
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，经常提及的两种数据交换格式分别是XML和JSON（重点学）
1. XML
XML的英文全程是EXtensible Markup Language，即可扩展标记语言。因此，XML和HTML类似，也是一种标记语言。
1. XML和HTML的区别
XML和HTML虽然都是标记语言，但是，它们两者之间没有任何的关系。
HTML被设计用来描述网页上的内容，是网页内容的载体。
XML被设计用来传输和存储数据，是数据的载体。
2. XML的缺点
1. 格式臃肿，和数据无关的代码多，体积大，传输效率低
2. 在JavaScript中解析XML比较麻烦。
2. JSON
JSON的英文全称是JavaScript Object Notation，即”JavaScript对象表示法”。简单来讲，JSON就是JavaScript对象和数组的字符串表示法，它使用文本表示一个JS对象或数组的信息，因此，JSON的本质是字符串。
作用：JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小，更快，更易解析。
1. JSON的两种结构
JSON就是用字符串来表示JavaScript的对象和数组。所以，JSON中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
2. 对象结构：
对象结构：对象结构在JSON中表示为{}括起来的内容。
数据结构为{key:value,key:value,...}的键值对结构。
其中，key必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字，字符串，布尔值，null，数组，对象6种类型。
（左边是错的，右边是对的）
3. 数组结构
数组结构在JSON中表示为[]括起来的内容。
数据结构为[“java”, ”javascript”, 30, true...]
数组中的数据类型可以是数字，字符串，布尔值，null，数组，对象6种类型。
4. JSON语法注意事项
- 属性名必须使用双引号包裹
- 字符串类型的值必须使用双引号包裹
- JSON中不允许使用单引号表示字符串
- JSON中不能写注释
- JSON最外层必须是对象或数组格式
不能使用undefined或函数作为JSON的值
3. JSON和JS对象的关系
JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。
4. JSON和JS对象的互转
要实现从JSON字符串转换为JS对象，使用JSON.parse()方法。
要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法。
5. 序列化和反序列化
把数据对象转换为字符串的过程，叫做序列化。
把字符串转换为数据对象的过程，叫做反序列化。
六. jQuery中的Ajax
浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法如下：
$.get()，$.post()，$.ajax()
1. $.get()函数的语法
jQuery中的$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。
语法：$.get(url,[data],[callback])
其中，三个参数的各自代表的含义如下：
|
参数名 |
参数类型 |
是否必选 |
说明 |
|
url |
string |
是 |
要请求的资源地址 |
|
data |
object |
否 |
请求资源期间要携带的参数 |
|
callback |
function |
否 |
请求成功时的回调函数 |
1. $.get()发起不带参数的请求
使用$.get()函数发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可，示例代码如下：
$.get(‘http://www.liulongbin.top:3006/api/getbooks’,function(res) {
console.log(res) //这里的res是服务器返回的数据
})2. $.get()发起带参数的请求
使用$.get()函数发起带参数的请求时,示例代码如下：
$.get(‘http://www.liulongbin.top:3006/api/getbooks’,{id:1},function(res) {
console.log(res) //这里的res是服务器返回的数据
})2. $.post()函数的语法
jQuery中$.post()函数的功能单一，专门用来发起post请求，从而向服务器提交数据
语法：$.post(url,[data],[callback])
其中，三个参数各自代表的含义如下：
|
参数名 |
参数类型 |
是否必选 |
说明 |
|
url |
string |
是 |
提交数据的地址 |
|
data |
object |
否 |
要提交的数据 |
|
callback |
function |
否 |
数据提交成功时的回调函数 |
3. $.ajax()函数的语法
相比于$.get()和$.post()函数，jQuery中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
语法：
$.ajax({
type:’’, //请求的方式，例如GET或POST
url:’’, //请求的URL地址
data:{ }, //这次请求要携带的数据
success: function(red){ } //请求成功之后的回调函数
})使用$.ajax()发起GET请求，只需将type属性设置为’GET’即可
使用$.ajax()发起POST请求，只需将type属性设置为’POST’即可
七. axios
axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，可以用在浏览器和 node.js中。
1. 为什么会有axios
最初浏览器页面向服务器请求数据时，返回的是整个页面，整个页面都会刷新。当我们只需要请求部分数据时，返回整个页面会造成网络资源的占用。为了提高数据请求效率，异步网络请求Ajax出现了，它可以在页面无刷新的情况下请求数据。
jQuery封装的ajax，原生的XMLHttpRequest，以及axios都可以实现异步网络请求。
2. 什么是axios
axios（相比于原生的XMLHttpRequest对象来说） 简单易用；
（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
（axios本质上是原生XMLHttpRequest的封装）
3. axios的特点
支持 Promise API
拦截请求与响应，比如：在请求前添加授权和响应前做一些事情
转换请求数据、响应数据，比如：进行请求加密或者响应数据加密
自动转换JSON数据
客户端支持防御 XSRF
取消请求
在浏览器和node中都可以使用
4. axios的使用方法
1. 在项目中安装
npm install axios2. 请求配置
axios中的请求配置参数中，包括以下内容
{
// baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。一般用于全局路径配置
// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// url 是用于请求的服务器 URL
url: '/user',
// method 是创建请求时使用的方法
method: 'get', // 默认是 get
// params 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},
// data 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 transformRequest 时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属：FormData, File, Blob
// - Node 专属： Stream
data: {
firstName: 'Fred'
},
// timeout 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 timeout 的时间，请求将被中断
timeout: 1000,
// transformRequest 允许在向服务器发送前，修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// transformResponse 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// headers 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// paramsSerializer 是一个负责 params 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// withCredentials 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的
// adapter 允许自定义处理请求，以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// auth 表示应该使用 HTTP 基础验证，并提供凭据
// 这将设置一个 Authorization 头，覆写掉现有的任意使用 headers 设置的自定义 Authorization头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// responseType 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // 默认的
// xsrfCookieName 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default
// xsrfHeaderName 是承载 xsrf token 的值的 HTTP 头的名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
// onUploadProgress 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// onDownloadProgress 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// maxContentLength 定义允许的响应内容的最大尺寸
maxContentLength: 2000,
// validateStatus 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve; 否则，promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认的
},
// maxRedirects 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0，将不会 follow 任何重定向
maxRedirects: 5, // 默认的
// httpAgent 和 httpsAgent 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
// keepAlive 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' 定义代理服务器的主机名称和端口
// auth 表示 HTTP 基础验证应当用于连接代理，并提供凭据
// 这将会设置一个 Proxy-Authorization 头，覆写掉已有的通过使用 header 设置的自定义 Proxy-Authorization 头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// cancelToken 指定用于取消请求的 cancel token
// （查看后面的 Cancellation 这节了解更多）
cancelToken: new CancelToken(function (cancel) {
})
}3. 响应结构
{
// data 由服务器提供的响应
data: {},
// status 来自服务器响应的 HTTP 状态码
status: 200,
// statusText 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// headers 服务器响应的头
headers: {},
// config 是为请求提供的配置信息
config: {}
}
4. 拦截器
在请求或响应被then或catch处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});5. axios的语法
引入axios.js：：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
使用 axios 函数 ：✓ 传入配置对象； ✓ 再用 .then 回调函数接收结果，并做后续处理
6. axios的两种写法
1. 请求配置（代码比较多，但是用起来简单）
axios({
url:'/请求路径',
methods:'请求方法',
params:{请求行query参数},
data:{请求体body参数}
})2. 请求别名（代码比较少，但是用起来没有配置那么方便）
axios.get('/请求路径',{params:{参数名：参数值}})
axios.post('/请求路径',{参数名：参数值})
axios.put('/请求路径',{参数名：参数值})
axios.patch('/请求路径',{参数名：参数值})3. delete方法既可以query参数，也可body参数
axios.delete('/请求路径',{params:{参数名：参数值}})
axios.delete('/请求路径',{data:{参数名：参数值}})7. 什么是查询参数
携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据
举例：查询河北省下属的城市列表，需要先把河北省传递给服务器
1. URL查询参数
浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据。
语法：http://xxxx.com/xxx/xxx?参数名1=值&参数名2=值参数名一般是后端规定的，值前端看情况传递即可
2. axios查询参数
语法：使用axios提供的params选项
axios({
url: '目标资源地址',
params: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})3. 练习：利用axios查询参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询参数</title>
</head>
<body>
<!--
城市列表: http://hmajax.itheima.net/api/city
参数名: pname
值: 省份名字
-->
<p></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/city',
// 查询参数
params: {
pname: '辽宁省'
}
}).then(result => {
console.log(result.data.list)
document.querySelector('p').innerHTML = result.data.list.join('<br>')
})
</script>
</body>
</html>4. 案例：利用axios查询参数
根据省份和城市的名字查地区
/*
获取地区列表: http://hmajax.itheima.net/api/area
查询参数:
pname: 省份或直辖市名字
cname: 城市名字
*/
// 目标: 根据省份和城市名字, 查询地区列表
// 1. 查询按钮-点击事件
document.querySelector('.sel-btn').addEventListener('click', () => {
// 2. 获取省份和城市名字
let pname = document.querySelector('.province').value
let cname = document.querySelector('.city').value
// 3. 基于axios请求地区列表数据
axios({
url: 'http://hmajax.itheima.net/api/area',
params: {
pname,
cname
}
}).then(result => {
// console.log(result)
// 4. 把数据转li标签插入到页面上
let list = result.data.list
console.log(list)
let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')
console.log(theLi)
document.querySelector('.list-group').innerHTML = theLi
})
})8. 常用请求方法
请求方法：对服务器资源，要执行的操作
请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作
9. 练习
需求：注册账号，提交用户名和密码到服务器保存
/*
注册用户：http://hmajax.itheima.net/api/register
请求方法：POST
参数名：
username：用户名（中英文和数字组成，最少8位）
password：密码 （最少6位）
目标：点击按钮，通过axios提交用户和密码，完成注册
*/
document.querySelector('.btn').addEventListener('click', () => {
axios({
url: 'http://hmajax.itheima.net/api/register',
//指定请求方法
method: 'POST',
//提交数据
data: {
username: 'itheima007',
password: '7654321'
}
})
})10. axios错误处理
场景：再次注册相同的账号，会遇到报错信息
处理：用更直观的方式，给普通用户展示错误信息
在 axios 语法中要如何处理呢？
因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上
在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参，语法如下：
axios({
// ...请求选项
}).then(result => {
// 处理成功数据
}).catch(error => {
// 处理失败错误
})document.querySelector('.btn').addEventListener('click', () => {
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'post',
data: {
username: 'itheima007',
password: '7654321'
}
}).then(result => {
// 成功
console.log(result)
}).catch(error => {
// 失败
// 处理错误信息
console.log(error)
console.log(error.response.data.message)
alert(error.response.data.message)
})
})11. 应用
1. 发起一个GET请求
const axios = require('axios');
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.finally(function () {
// 总是会执行
});
// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// 总是会执行
});
// 支持async/await用法
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}2. 发起一个POST请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});八. JSONP
1. 同源策略和跨域
1. 什么是同源
如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
以 http://c.biancheng.net:80/ 为例，http 为协议，c.biancheng.net 为域名，80 为端口（提示：80 为默认端口，可以省略，若为其它端口则必须显示定义）。
2. 什么是同源策略
同源策略是浏览器提供的一个安全功能。
MDN官方给定的概念：同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解：浏览器规定，A网站的JavaScript，不允许和非同源网站C之间，进行资源的交互。
例如：
- 无法读取非同源网页的Cookie,LocalStorage和IndexedDB
- 无法接触非同源网页的DOM
- 无法向非同源地址发送Ajax请求。
3. 什么是跨域
同源指的是两个URL的协议，域名，端口一致，反之，则是跨域。
为了安全，浏览器不允许进行跨域请求。当我们通过 Ajax 在网页和服务器之间发送或接收数据时，需要保证网页与所请求的地址是同源的，否则无法请求成功。
例如 http://c.biancheng.net/ 下的网页，只能与同在 http://c.biancheng.net/ 下的程序进行交互，无法与 https://www.baidu.com/ 下的程序进行交互。
虽然同源策略在一定程度上提高了网站的安全，但也会给程序员带来一些麻烦。
例如在访问一些开发接口时，由于同源策略的存在，会调用失败。要解决这种问题就需要用到跨域，跨域的方法有许多种，其中最经典的就是 JSONP。
网页：http://www.test.com/index.html
接口：http://www.api.com/userlist
浏览器对跨域请求的拦截：
4. 如何实现跨域数据请求
实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS。
JSONP：出现的早，兼容性好。缺点是：只支持GET请求，不支持POST请求。
CORS：出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。
2. 什么是JSONP
JSONP 全称“JSON with Padding”，译为“带回调的 JSON”，它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略，进行跨域请求。
JSONP 不是一门编程语言，它更像一个漏洞，程序员可以利用这个漏洞，实现跨域（可以简单理解为跨域名）传输数据。
1. JSONP的实现原理
在进行 Ajax 请求时，由于同源策略的影响，不能进行跨域请求。
而<script>标签的 src 属性却可以加载跨域的 JavaScript 脚本，JSONP 就是利用这一特性实现的。
与普通的 Ajax 请求不同，在使用 JSONP 进行跨域请求时，服务器不再返回 JSON 格式的数据，而是返回一段调用某个函数的 JavaScript 代码，在 src 属性中调用，来实现跨域（通过函数调用的形式，接收跨域接口响应回来的数据。）。
2. JSONP的缺点
由于JSONP是通过<script>标签的src属性，来实现跨域数据获取的，所以，JSONP只支持GET数据请求，不支持POST请求。
注意:JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest这个对象。
3. 如何实现JSONP
假设我们要从网站 localhost:8080 向服务器下的localhost:8081 发送请求，并在服务器返回如下内容：
{"name":"C语言中文网", "url":"http://c.biancheng.net/"}如果直接发送 Ajax 请求，由于同源策略的存在，请求会被阻止，因为网站和服务器不同源。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="result"></div>
<button type="button" onclick="sendAjax()">发送请求</button>
<script>
function sendAjax() {
// 创建 XMLHttpRequest 对象
var request = new XMLHttpRequest();
// 实例化请求对象
request.open("GET", "http://localhost:8081/test.php");
// 监听 readyState 的变化
request.onreadystatechange = function() {
// 检查请求是否成功
if(this.readyState === 4 && this.status === 200) {
// 将来自服务器的响应插入当前页面
document.getElementById("result").innerHTML = this.responseText;
}
};
// 将请求发送到服务器
request.send();
}
</script>
</body>
</html>点击页面的“发送请求”按钮，会返回如下错误：
Access to XMLHttpRequest at 'http://localhost:8081/test.php' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET http://localhost:8081/test.php net::ERR_FAILED想要成功从服务器中获取数据，就可以使用上面介绍的 JSONP 来实现，实现步骤如下：
1. 使用<script>标签，将标签的 src 属性设置为要请求的地址，如下所示：
<script src="http://localhost:8081/test.php"></script><script>标签会自动解析并执行返回的内容，如果这些内容不是完整的 JavaScript 代码，程序就会报错，所以在进行 JSONP 跨域请求时，需要保证服务器返回一段完整的 JavaScript 代码。
另外，返回的内容也不能是一段纯 JSON 的数据，因为 JSON 数据会自动转换为一个 JavaScript 对象，但不将其分配给变量或者传递给函数，我们也无法拿来使用
因此，我们可以在请求中提供一个回调函数（被作为参数传递的函数，等同于一般函数），然后通过服务器返回这个函数，并将要返回的 JSON 数据作为函数的参数一同返回，这样<script>标签在解析并执行返回内容时就会自动调用这个函数。示例代码如下：
<script src="http://localhost:8081/test.php?callback=showJsonData"></script>2. 服务器 http://localhost:8081/ 的完整代码如下所示：
<?php
$data = array('name'=>'C语言中文网', 'url'=>'http://c.biancheng.net/'); // 定义一个数组，其中包含要返回的内容
$callback = $_GET['callback']; // 接收请求中的回调函数
echo $callback."(".json_encode($data).")"; // 将上面的数组转换为 JSON 格式，然后拼接到函数中，作为函数的参数，返回给前端
return; // 阻止程序向下继续运行
?> 3. 网站 localhost:8080 的完整代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
function showJsonData(data){
console.log(data);
}
</script>
<script src="http://localhost:8081/test.php?callback=showJsonData"></script>
</body>
</html>4. 运行结果
{name: 'C语言中文网', url: 'http://c.biancheng.net/'}4. jQuery中的JSONP
jQuery提供的$.ajax()函数，除了可以发起真正的Ajax数据请求之外，还能够发起JSONP数据请求。
默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQuery的参数，jQueryxxx是随机生成的一个回调函数的名称。
在使用jQuery发起JSONP请求时，如果想要自定义JSONP的参数以及回调函数名称，可以通过如下两个参数来指定
//发送到服务端的参数名称，默认值为callback
jsonp:’callback’
//自定义的回调函数名称，默认值为jQueryxxx格式
jsonpCallback:’abc’
5. jQuery中JSONP的实现过程
jQuery中的JSONP，也是通过<script>标签的src属性实现跨域数据访问的，只不过，jQuery采用的是动态创建和移除<script>标签的方式，来发起JSONP数据请求。
在发起JSONP请求的时候，动态向<header>中append一个<script>标签；
在JSONP请求成功后，动态从<header>中移除刚append进去的<script>标签。
3. 防抖和节流
1. 什么是节流
节流策略：可以减少一段时间内事件的触发频率
节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。
每次执行操作前，必须先判断节流阀是否为空。
2. 节流的应用场景
1. 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次
2. 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费CPU资源。
3. 什么是防抖
防抖策略是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
4. 防抖的应用场景
用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源。
5. 节流和防抖的区别
节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面 N 多次的触发都会被忽略！
九. HTTP协议简介
1. 什么是通信
通信，就是信息的传递和交换
2. 通信三要素：
1. 通信的主体
2. 通信的内容
3. 通信的方式
例如：服务器把武功山的简介通过响应的方式发送给客户端浏览器。
其中，通信的主体是服务器和客户端浏览器，通信的内容是武功山的简介，通信的方式是响应。
3. 什么是通信协议
通信协议是指通信双方完成通信所必须遵守的规则和约定。
客户端与服务器之间要实现网页内容的传输，则通信双方必须遵守网页内容的传输协议。
网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议，简称HTTP协议。
4. 什么是HTTP协议
HTTP协议即超文本传送协议，它规定了客户端和服务器之间进行网页内容传输时，所必须遵守的传输格式。
例如：
客户端要以HTTP协议要求的格式把数据提交到服务器。
服务器要以HTTP协议要求的格式把内容响应给客户端。
5. HTTP协议的交互模型
HTTP协议采用了请求/响应的交互模型。
6. 什么是HTTP请求消息
由于HTTP协议属于客户端浏览器和服务器之间的通信协议。因此，客户端发起的请求叫做HTTP请求，客户端发送到服务器的消息，叫做HTTP请求消息。
注意：HTTP请求消息又叫做HTTP请求报文
1. HTTP请求消息的组成部分
HTTP请求消息由请求行，请求头部，空行和请求体4个部分组成。
请求行由请求方式，URL和HTTP协议版本3个部分组成，他们之间使用空格隔开。
请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。
请求头部由多行键/值对组成，每行的键和值之间用英文的冒号分隔。
请求头部常见的请求头字段
|
头部字段 |
说明 |
|
Host |
要请求的服务器域名 |
|
Connection |
客户端与服务器的连接方式（close或keepalive） |
|
Content-Length |
用来描述请求体的大小 |
|
Accept |
用来描述客户端能够接收到什么类型的返回内容 |
|
User-Agent |
产生请求的浏览器类型 |
|
Content-Type |
客户端告诉服务器实际发送的数据类型 |
|
Accept-Encoding |
客户端可接收的内容压缩编码形式 |
|
Accept-Language |
用户期望获得的自然语言的优先顺序 |
空行最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束。请求消息中的空行，用来分隔请求头部和请求体。
请求体
请求体中存放的，是要通过POST方式提交到服务器的数据。
注意：只有POST请求才有请求体，GET请求没有请求体。
2. 请求报文：错误排查
查看请求报文，可以用来确认我们代码发送的请求数据是否真的正确。
7. 什么是HTTP响应消息
响应消息就是服务器响应给客户端的消息内容，也叫响应报文。
1. HTTP响应消息的组成部分
HTTP响应消息由状态行，响应头部，空行和响应体4个部分组成。
状态行由HTTP协议版本，状态码和状态码的描述文本3个部分组成，他们之间使用空格隔开。
响应头部用来描述服务器的基本信息。响应头部由多行键/值对组成，每行的键和值之间用英文的冒号分隔。
空行，在最后一个响应头部字段结束后，会紧跟一个空行，用来通知客户端响应头部至此结束。响应消息中的空行，用来分隔响应头部与响应体。
响应体中存放的，是服务器响应给客户端的资源内容。
8. HTTP请求方法
HTTP请求方法，属于HTTP协议中的一部分，请求方法的作用就是，用来表明要对服务器上的资源执行的操作。最常用的请求方法是GET和POST。
9. HTTP响应状态码
HTTP响应状态码，也属于HTTP协议的一部分，用来标识响应的状态。
响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次 HTTP 请求的结果是成功还是失败了。
1. HTTP响应状态码的组成及分类
HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。
HTTP 状态码共分为 5 种类型：
|
分类 |
分类描述 |
|
1** |
信息，服务器收到请求，需要请求者继续执行操作（实际开发中很少遇到 1** 类型的状态码） |
|
2** |
成功，操作被成功接收并处理 |
|
3** |
重定向，需要进一步的操作以完成请求 |
|
4** |
客户端错误，请求包含语法错误或无法完成请求 |
|
5** |
服务器错误，服务器在处理请求的过程中发生了错误 |
2. 2** 成功相关的响应状态码
|
状态码 |
状态码英文名称 |
中文描述 |
|
200 |
OK |
请求成功。一般用于 GET 与 POST 请求 |
|
201 |
Created |
已创建。成功请求并创建了新的资源，通常用于 POST 或 PUT 请求 |
3. 3** 重定向相关的响应状态码
|
状态码 |
状态码英文名称 |
中文描述 |
|
301 |
Moved Permanently |
永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替 |
|
302 |
Found |
临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI |
|
304 |
Not Modified |
未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源（响应消息中不包含响应体）。客户端通常会缓存访问过的资源。 |
4. 4** 客户端错误相关的响应状态码
4** 范围的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。
|
状态码 |
状态码英文名称 |
中文描述 |
|
400 |
Bad Request |
1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。 2、请求参数有误。 |
|
401 |
Unauthorized |
当前请求需要用户验证。 |
|
403 |
Forbidden |
服务器已经理解请求，但是拒绝执行它。 |
|
404 |
Not Found |
服务器无法根据客户端的请求找到资源（网页）。 |
|
408 |
Request Timeout |
请求超时。服务器等待客户端发送的请求时间过长，超时。 |
5. 5** 服务端错误相关的响应状态码
5** 范围的状态码，表示服务器未能正常处理客户端的请求而出现意外错误。
|
状态码 |
状态码英文名称 |
中文描述 |
|
500 |
Internal Server Error |
服务器内部错误，无法完成请求。 |
|
501 |
Not Implemented |
服务器不支持该请求方法，无法完成请求。只有 GET 和 HEAD 请求方法是要求每个服务器必须支持的，其它请求方法在不支持的服务器上会返回501 |
|
503 |
Service Unavailable |
由于超载或系统维护，服务器暂时的无法处理客户端的请求。 |
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)