JavaScript -- ajax相关知识点的笔记

秣凡

2024-05-29 帮助1人

代码地址：JavaScript_jQuery测试案例: 本仓库是学习jQuery相关知识。视频网址：https://www.bilibili.com/video/BV1a4411w7Gx?share_source=copy_web&vd_source=d60891811856d864c216f6f0994c1a66 - Gitee.com

3.2 基于浏览器的开发者工具分析通信过程

6.2.1 $.get()发起不带参数的请求

6.2.2 $.get()发起不带参数的请求

6.3 $.post()函数的语法

6.3.1 $.post()向服务器提交数据

6.4 $.ajax()函数的语法

6.4.1 使用$.ajax()发起GET请求

6.4.2 使用$.ajax()发起POST请求

5.2 art-template的使用步骤

1. XMLHttpRequest的基本使用

1.1 使用xhr发起GET请求

1.2 了解xhr对象的readyState属性

4. XMLHttpRequest Level2的新特性

4.1 认识XMLHttpRequest Level2

4.1.1 旧版XMLHttpRequest的缺点

4.1.2 XMLHttpRequest Level2的新功能

4.4.5 监听onreadystatechange事件

4.5 显示文件上传进度

4.5.1 导入需要的库

4.5.2. 基于Bootstrap渲染进度条

5.1.4 使用jQuery发起上传文件的请求

5.2 jQuery实现loading效果

5.2.1 ajaxStart(callback)

5.2.2 ajaxStop(callback)

6.4.1 直接使用axios发起GET请求

6.4.2 直接使用axios发起POST请求

2.7 jQuery中JSONP的实现过程

3. 案例-淘宝搜索

3.1 获取用户输入的搜索关键词

3.2 封装getSuggestList函数

3.3.4 搜索关键词为空时隐藏搜索建议列表

1.3.1 HTTP 协议采用了请求/响应的交互模型。

阶段一：服务器的基本概念与初始Ajax

1. 客户端与服务器

服务器： 在上网过程中，负责存放和对外提供资源的电脑，叫服务器。

服务器的本质：就是一台电脑，只不过它的性能要比个人电脑高很多。

客户端：在因特网中，负责获取和消费资源的电脑。

学新通

2. URL地址

URL(全称是UniformResourceLocator)中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

2.1 URL地址的组成

URL地址一般由三部组成：

1. 客户端与服务器之间的通信协议

2. 存在该资源的服务器名称

3. 资源在服务器上具体存放位置

学新通

3. 分析网页的打开过程

3.1 图解客户端与服务器的通信过程

学新通

注意;

1. 客户端与服务器之间的通信过程，分为请求 -- 处理 -- 响应三个步骤。

2. 网页中的每一个资源，都是通过请求 -- 处理 -- 响应的方式从服务器获取回来的。

3.2 基于浏览器的开发者工具分析通信过程

在浏览器中，打开开发者工具中的 Network 面板，选中 Doc 页签，刷新页面，分析客户端与服务器的通讯过程。

学新通

4. 服务器对外提供了哪些资源

网页中常见的资源：

文字内容、Image图片、Audio音频、Video视频、数据

4.1 数据也是资源

网页中的数据，也是服务器对外提供的一种资源。 eg：排行榜

学新通

4.2 网页中如何请求数据

学新通

4.3 资源的请求方式

学新通

5. 了解Ajax

ajax 全名 async javascript and XML(异步JavaScript和XML)

是前后台交互的能⼒也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

是⼀个默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

Ajax使用客户端与服务器之间的数据传输的。

5.1 Ajax的应用

用户名检测：注册用户名是，通过ajax的形式，动态检测用户名是否被占用

搜素提示：当输入搜素关键字时，通过Ajax的形式，动态加载搜素提示列表

数据分页显示：当点击页码值的时候，通过Ajax的形式，根据页码值动态刷新表格数据

数据的增删查改

6. jQuery中的Ajax

6.1 了解jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以jQuery 对 XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。

jQuery中发起Ajax请求最常用的三个方法如下：

$.get() : 从服务器获取数据

$.post() : 向服务器提交数据

$.ajax() : 即可以想服务器获取数据，又可以想服务器提交数据。

6.2 $.get()函数的语法

jQuery中$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。

$.get()函数的语法如下：

$.get(url , [data], [callback])

url : String （必要）要请求的资源地址

data：object （非必要）请求资源期间要携带的参数

callback ： function （非必要）请求成功时的回调函数

6.2.1 $.get()发起不带参数的请求

使用$.get() 函数发起不带参数的请求时，直接请求的 URL 地址和请求成功之后的回调函数即可，示例代码：学新通

6.2.2 $.get()发起不带参数的请求

学新通

6.3 $.post()函数的语法

jQuery中$.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

$.post()函数的语法如下：

$.post(url, [data], [callback])

url : String （必要）提交数据的地址

data：object （非必要）要提交的数据

callback ： function （非必要）数据提交成功时的回调函数

6.3.1 $.post()向服务器提交数据

学新通

6.4 $.ajax()函数的语法

学新通

type中的属性大小写均可。

data可以省略。

6.4.1 使用$.ajax()发起GET请求

学新通

6.4.2 使用$.ajax()发起POST请求

学新通

7. 接口

接口的概念：使用Ajax请求数据时，被请求的URL地址，就叫做数据接口。同时每一个接口必须有请求方式。

7.1 接口的请求过程

1. 通过GET方式请求接口的过程

学新通

2. 通过POST方式请求接口的过程

学新通

7.2 接口测试工具

接口测试工具：对数据接口进行检测，验证接口是否被正常访问。

好处： 接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。

接口工具： Apipost、postman、Apifox、

7.2.1 接口文档

接口文档：接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数

以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何调用。

7.2.2 接口文档的组成部分

学新通

8. 案列

8.1 渲染图书列表

学新通

8.2 将用户输入的内容渲染到聊天窗口

学新通

8.3 发起请求获取聊天消息

学新通

8.4 通过 <audio> 播放语音

学新通

8.5 使用回车发送消息

学新通

阶段二： form表单与模块引擎

1. from 表单的基本使用

表单在网页中主要负责数据采集功能。HTML中的<from>标签，就是用于采集用户输入的信息，并通过<from>标签的提交操作，把采集到的信息提交到服务器端进行处理。

eg：登录页面

学新通

1.1 表单的组成部分

表单的三个基本组成部分：表单标签、表单域、表单按钮。

表单标签： <from></from>

表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和上传框等。

学新通

表单按钮：学新通

1.2 <from>标签的属性

<from>标签用来采集数据，<from>标签的属性则是用来规定如何让把采集到的数据发送到服务器。

学新通

action：

学新通

target：

学新通

method：

学新通

enctype：

学新通

1.3 表单的同步提交及缺点

表单的同步提交：通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为。

表单同步提交的缺点：学新通

解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器。

2. 通过Ajax提交表单数据

2.1 监听表单提交事件

在jQuery中，可以使用如下两种方式，监听到表单提交事件：

学新通

2.2 阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的专挑，示例代码如下：

学新通

2.3 快速获取表单中的数据

2.3.1 serialize()函数

为了简化表单中数据的获取操作，jQuery提供了serialize()函数，起语法格式如下：

$(selector).serialize()

好处：可以一次性获取到表单中所有的数据。

学新通

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

3. 案例 -- 评论列表

3.2 获取评论列表

学新通

4. 模板引擎的基本概念

4.1 渲染UI结构时遇到的问题

通过字符串拼接的形式，来渲染UI结构：

学新通

问题：

如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。

4.2 模板引擎

模板引擎：它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

学新通

4.3 模板引擎的好处

1. 减少了字符串的拼接操作

2. 使代码结构更清晰

3. 使代码更易于阅读与维护

5. art-template模板引擎

JS的引擎不止一个，以art-template入手较好。

art-template简介：

art-template 使一个简约、超快的模板引擎。中文官网首页为：art-template

下载地址：安装 - art-template

5.1 使用传统方式渲染UI结构

学新通

<script>
var data = {
title: '<h3>用户信息</h3>',
name: 'zs',
age: 20,
isVIP: true,
regTime: new Date(),
hobby: ['吃饭', '睡觉', '打豆豆']
}
$(function () {
$('#name').html(data.name)
$('#title').html(data.title)
$('#age').html(data.age)
$('#isVIP').html(data.isVIP)
$('#regTime').html(data.regTime)
var rows = []
$.each(data.hobby, function (i, item) {
rows.push('<li>' item '</li>')
})
$('#hobby').html(rows.join(''))
})
</script>

5.2 art-template的使用步骤

1. 导入art-template

<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>

2. 定义数据

// 2. 定义需要渲染的数据
var data = {
name: 'zs',
age: 20,
test: '<h3>测试原文输出</h3>',
flag: 1,
hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date()
}

3. 定义模板

<script type="text/html" id="tpl-user">
<h1>{{name}} ------ {{age}}</h1>
{{@ test}}
<div>
{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
</div>
<ul>
{{each hobby}}
<li>索引是:{{$index}}，循环项是:{{$value}}</li>
{{/each}}
</ul>
<h3>{{regTime | dateFormat}}</h3>
</script>

{{ }} ：占位符

4. 调用template

// 4. 调用 template 函数
var htmlStr = template('tpl-user', data)

5. 渲染HTML结构

// 5. 渲染HTML结构
$('#container').html(htmlStr)

5.3 art-template标准语法

art-template提供了{{ }} 这种语法格式，在{{ }}内可以进行变量输出，或循环数组等操作，这种{{ }}语法在art-template中被称为标准语法。

5.3.1 标准语法 -- 输出

{{value}} 变量的输出
{{obj.key}} 对象属性的输出
{{obj['key']}} 对象属性的输出
{{a?b:c}} 三元表达式的输出
{{a||b}} 逻辑或的输出
{{a b}} 加减乘除等表达式的输出

在{{ }}语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

5.3.2 原文输出

{{@ value}}

如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。

5.3.3 条件输出

如果要实现条件输出，则可以子{{ }}中使用 if..else if.../if 的方式，进行按需输出。

{{ if value }} 按需输出的内容 {{ /if }}

{{ if v1 }} 按需输出的内容 {{ else if v2}} 按需输出的内容 {{ /if }}

5.3.4 循环输出

如果要实现玄幻输出，则可以在{{ }}内，通过each语法循环数组，当前循环的索引使用$index进行访问，当前的循环向使用$value进行访问。

{{each arr}}

{{ $index }} {{ $value }}

{{/each}}

<ul>
{{each hobby}}
<li>索引是:{{$index}}，循环项是:{{$value}}</li>
{{/each}}
</ul>

5.3.5 过滤器

学新通

语法：

{{ value | filterName }}

过滤器语法类似管道操作符，它的上一个输出作为下一个输入。s

定义过滤器的基本语法如下：

template.defaults.imports.filterName = function(value){/*return处理的结果*/}

学新通

6. 模板引擎的实现原理

6.1 正则与字符串操作

6.1.1 基本语法

（1）exec()
exec() 函数用于检索字符串中的正则表达式的匹配
如果字符串中有匹配的值，则返回该匹配值，否则返回null
RegExpObject.exec(string);
如：
var str = 'hello';
var pattern = /o/;
console.log(pattern.exec(str));
// 输出结果: ["o",index:4,input:"hello",groups:undefined]

（2）分组
正则表达式() 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容
如：
var str = '<div>我是{{name}}</div>';
var pattern = /{{([a-zA-Z] )}}/;
var patternResult = pattern.exec(str);
console.log(patternResult);
// 得到name 相关的分组信息
// ["{{name}}","name",index:7,input:"<div>我是{{name}}</div>",groups:undefined]

（3）replace()
replace() 函数用于在字符串中用一些字符替换另一些字符
如：
var result = '123456'.replace('123','abc')
// 得到的result 的值为字符串'abc456'
如：
var str = '<div>我是{{name}}</div>
var pattern = /{{([a-zA-Z] )}}/;
var patternResult = pattern.exec(str);
console.log(patternResult);
// ["{{name}}","name",index:7,input:"<div>我是{{name}}</div>",groups:undefined]
str = str.replace(patternResult[0],patternResult[1]);
// replace() 函数返回值为替换后的新字符串
// 输出的内容是: <div>我是name</div>

（4）多次replace() 操作
如：
var str = '<div>{{name}}今年{{ age }}岁了</div>';
var pattern = /{{\s*([a-zA-Z] )\s*}}/;
// \s 匹配空格

// 第一次匹配
var patternResult = pattern.exec(str);
str = str.replace(patternResult[0],patternResult[1]);
console.log(str);
// 输出<div>name今年{ {age }}岁了</div>

// 第二次匹配
patternResult = pattern.exec(str);
str= str.replace(patternResult[0],patternResult[1]);
console.log(str);
// 输出<div>name今年age岁了</div>

// 第三次匹配
patternResult = pattern.exec(str);
console.log(patternResult);
// 输出null

（5）使用循环实现多次replace() 操作
如：
var str = '<div>{{name}}今年{{age}}岁了</div>';
var pattern = /\s*([a-zA-Z] )\s*/;

var patternResult = null;
while(patternResult = pattern.exec(str)){
str = str.replace(patternResult[0],patternResult[1]);
}
console.log(str);
// 输出<div>name今年age岁了</div>

（6）replace 替换为真值
如：
var data = {name:'张三',age:20};
var str = '<div>{{name}}今年{{age}}岁了</div>';
var pattern = /\s*([a-zA-Z] )\s*/;

var patternResult = null;
while((patternResult = pattern.exec(str))){
str = str.replace(patternResult[0],data[patternResult[1]]);
}
console.log(str);

6.1.2 实现简易的模板引擎

（1）定义模板引擎
<div id="user-box"></div>
<script type="text/html" id="tpl-user">
<div>姓名:{{name}}</div>
<div>年龄:{{age}}</div>
<div>性别:{{ gender}}</div>
<div>住址:{{address }}</div>
</script>

（2）预调用模板引擎
<script>
// 定义数据
var data = {name: 'zs',age: 28,gender: '男',address: '北京'};
// 调用模板函数
var htmlStr = template('tpl-user,data);
// 渲染HTML结构
document.getElementById('user-box').innerHTML = htmlStr;
</script>

（3）封装template 函数
fucntion template(id,data){
var str = document.getElementById(id).innerHTML;
var pattern = /{{\s*([a-zA-Z] )\s*}}/;
var pattResult = null;
whilt((pattResult = pattern.exec(str))){
str = str.replace(pattResult[0],data[pattResult[1]]);
}
return str;
}

阶段三：Ajax加强

1. XMLHttpRequest的基本使用

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

学新通

1.1 使用xhr发起GET请求

步骤：

1. 创建 xhr 对象

2. 调用 xhr.open() 函数

3. 调用 xhr.send() 函数

4. 监听 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 打印服务器响应回来的数据
console.log(xhr.responseText)
}
}

1.2 了解xhr对象的readyState属性

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

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

1.3 使用xhr发起POST请求

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

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

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

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

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

1.4 查询字符串

定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

格式：将英文的 ? 放在URL 的末尾，然后再加上参数＝值，想加上多个参数的话，使用 & 符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

学新通

1.4.1 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.5 URL编码与解码

1.5.1 URL编码

URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。

URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

URL编码原则的通俗理解：使用英文字符去表示非英文字符。

学新通

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

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

encodeURI() 编码的函数

decodeURI() 解码的函数

encodeURI('黑马程序员')

// 输出字符串黑马程序员 decodeURI('黑马')

// 输出字符串黑马

1.5.3. URL编码的注意事项

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

1.6 使用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)
}
}

2. 数据交换格式

2.1 什么是数据交换格式

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

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

学新通

2.2 XML

2.2.1 XML

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

学新通

note: 这是一条消息 to: 发送给送谁 from：谁发送的 heading：发送消息的标题

body：消息内容

2.2.2 XML和HTML的区别

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

1. HTML 被设计用来描述网页上的内容，是网页内容的载体

2. XML 被设计用来传输和存储数据，是数据的载体

学新通

2.2.3 XML的缺点

学新通

2.3 JSON

2.3.1 JSON定义

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

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

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

2.3.2 JSON的两种结构

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

一、对象结构

对象结构：对象结构在 JSON 中表示为 { } 括起来的内容。

数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

{
"name": "zs",
"age": 20,
"gender": "男",
"address": null,
"hobby": ["吃饭", "睡觉", "打豆豆"]
}

二、数组结构

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

[ "java", "python", "php" ]
[ 100, 200, 300.5 ]
[ true, false, null ]
[ { "name": "zs", "age": 20}, { "name": "ls", "age": 30} ]
[ [ "苹果", "榴莲", "椰子" ], [ 4, 50, 5 ] ]

2.3.3 JSON语法注意事项

1. 属性名必须使用双引号包裹

2. 字符串类型的值必须使用双引号包裹

3. JSON 中不允许使用单引号表示字符串

4. JSON 中不能写注释

5. JSON 的最外层必须是对象或数组格式

6. 不能使用 undefined 或函数作为 JSON 的值

JSON 的作用：在计算机与网络之间存储和传输数据。

JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

2.3.4 JSON和JS对象的关系

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

2.3.5 JSON和JS对象的互转

要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：

学新通

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

学新通

<script>
// JSON --> JS
// var jsonStr = '{"a": "Hello", "b": "world"}'
// var obj = JSON.parse(jsonStr)
// console.log(obj)
// JS --> JSON
var obj2 = { a: 'hello', b: 'world', c: false }
var str = JSON.stringify(obj2)
console.log(str)
console.log(typeof str)
</script>

2.3.6 序列化和反序列化

把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

3. 封装自己的Ajax函数

3.1 要实现的效果

学新通

3.2 定义options参数选项

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

method 请求的类型

url 请求的 URL 地址

data 请求携带的数据

success 请求成功之后的回调函数

3.3 处理data参数

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

学新通

3.4 定义itheima函数

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

学新通

3.5 判断请求的类型

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

学新通

4. XMLHttpRequest Level2的新特性

4.1 认识XMLHttpRequest Level2

4.1.1 旧版XMLHttpRequest的缺点

1. 只支持文本数据的传输，无法用来读取和上传文件

2. 传送和接收数据时，没有进度信息，只能提示有没有完成

4.1.2 XMLHttpRequest Level2的新功能

1. 可以设置 HTTP 请求的时限

2. 可以使用 FormData 对象管理表单数据

3. 可以上传文件

4. 可以获得数据传输的进度信息

4.2 设置HTTP请求时限

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

学新通

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

学新通

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

4.3 FromData对象管理表单数据

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

学新通

4.4 上传文件

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

实现步骤：

1. 定义 UI 结构

2. 验证是否选择了文件

3. 向 FormData 中追加文件

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

5. 监听 onreadystatechange 事件

4.4.1 定义UI结构

学新通

4.4.2 验证是否选择了文件

学新通

4.4.3 向FormData中追加文件

学新通

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

学新通

4.4.5 监听onreadystatechange事件

学新通

4.5 显示文件上传进度

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

学新通

4.5.1 导入需要的库

学新通

4.5.2. 基于Bootstrap渲染进度条

学新通

4.5.3 监听上传进度的事件

学新通

4.5.4 监听上传完成的事件

学新通

5. jQuery高级用法

5.1 jQuery实现文件上传

5.1.1 定义UI

学新通

5.1.2 验证是否选择了文件

学新通

5.1.3 向FormData中追加文件

学新通

5.1.4 使用jQuery发起上传文件的请求

学新通

5.2 jQuery实现loading效果

5.2.1 ajaxStart(callback)

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

学新通

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

5.2.2 ajaxStop(callback)

Ajax 请求结束时，执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果，示例代码如下:

学新通

6. axios

6.1 axios

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

6.2 axios发起GET请求

axios 发起 get 请求的语法：

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

具体的请求示例如下：

学新通

6.3 axios发起POST请求

axios 发起 post 请求的语法：

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

具体的请求示例如下：

学新通

6.4 直接使用axios发起请求

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

学新通

6.4.1 直接使用axios发起GET请求

学新通

6.4.2 直接使用axios发起POST请求

学新通

阶段四：

1. 了解同源策略和跨域

1.1 同源策略

1.1.1 同源

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。

例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：

URL	是否同源	原因
http://www.test.com/other.html	是	同源（协议、域名、端口相同）
https://www.test.com/about.html	否	协议不同（http 与 https）
http://blog.test.com/movie.html	否	域名不同（www.test.com 与 blog.test.com）
http://www.test.com:7001/home.html	否	端口不同（默认的 80 端口与 7001 端口）
http://www.test.com:80/main.html	是	同源（协议、域名、端口相同）

1.1.2 同源策略

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。

MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2. 无法接触非同源网页的 DOM

3. 无法向非同源地址发送 Ajax 请求

1.2 跨域

1.2.1 跨域

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

网页：http://www.test.com/index.html

接口：http://www.api.com/userlist

1.2.2 浏览器对跨域请求的拦截

学新通

1.2.3 如何跨域数据请求

现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。

JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。

CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

2. JSONP

2.1 什么是JSONP

JSONP(JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

2.2 JSONP的实现原理

由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。

因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

2.3 自己实现一个简单的JSONP

定义一个success回调函数：

<script>
function success(data) {
console.log('获取到了data数据：')
console.log(data)
}
</script>

通过 <script> 标签，请求接口数据：

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

2.4 JSONP的缺点

由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。

注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。

2.5 jQuery中的JSONP

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：

学新通

默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称。

2.6 自定义参数及回调函数名称

在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定：

$.ajax({
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
dataType: 'jsonp',
// 发送到服务端的参数名称，默认值为 callback
jsonp: 'callback',
// 自定义的回调函数名称，默认值为 jQueryxxx 格式
jsonpCallback: 'abc',
success: function(res) {
console.log(res)
}
})

2.7 jQuery中JSONP的实现过程

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。

1. 在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；

2. 在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；

3. 案例-淘宝搜索

3.1 获取用户输入的搜索关键词

为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件，示例代码如下：

学新通

// 监听文本框的 keyup 事件
$('#ipt').on('keyup', function() {
// 获取用户输入的内容
var keywords = $(this).val().trim()
// 判断用户输入的内容是否为空
if (keywords.length <= 0) {
return
}
// TODO：获取搜索建议列表
})

3.2 封装getSuggestList函数

将获取搜索建议列表的代码，封装到 getSuggestList 函数中，示例代码如下：

function getSuggestList(kw) {
$.ajax({
// 指定请求的 URL 地址，其中，q 是用户输入的关键字
url: 'https://suggest.taobao.com/sug?q=' kw,
// 指定要发起的是 JSONP 请求
dataType: 'jsonp',
// 成功的回调函数
success: function(res) { console.log(res) }
})
}

3.3 渲染建议列表的UI结构

3.3.1 定义搜索建议列表

<div class="box">
<div class="tabs"></div>
<div class="search-box"></div>
<div id="suggest-list"></div>
</div>

3.3.2 定义模板结构

<script type="text/html" id="tpl-suggestList">
{{each result}}
<div class="suggest-item">{{$value[0]}}</div>
{{/each}}
</script>

3.3.3 定义渲染模板结构的函数

// 渲染建议列表
function renderSuggestList(res) {
// 如果没有需要渲染的数据，则直接 return
if (res.result.length <= 0) {
return $('#suggest-list').empty().hide()
}
// 渲染模板结构
var htmlStr = template('tpl-suggestList', res)
$('#suggest-list').html(htmlStr).show()
}

3.3.4 搜索关键词为空时隐藏搜索建议列表

$('#ipt').on('keyup', function() {
// 获取用户输入的内容
var keywords = $(this).val().trim()
// 判断用户输入的内容是否为空
if (keywords.length <= 0) {
// 如果关键词为空，则清空后隐藏搜索建议列表
return $('#suggest-list').empty().hide()
}
getSuggestList(keywords)
})

3.4 输入框的防抖

3.4.1 什么是防抖

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

学新通

3.4.2 防抖的应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

3.4.3 实现输入框的防抖

var timer = null // 1. 防抖动的 timer
function debounceSearch(keywords) { // 2. 定义防抖的函数
timer = setTimeout(function() {
// 发起 JSONP 请求
getSuggestList(keywords)
}, 500)
}
$('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时，立即清空 timer
clearTimeout(timer)
// ...省略其他代码
debounceSearch(keywords)
})

3.5 缓存搜索的建议列表

3.5.1 定义全局缓存对象

// 缓存对象

var cacheObj = {}

3.5.2 将搜索结果保存到缓存对象中

// 渲染建议列表
function renderSuggestList(res) {
// ...省略其他代码
// 将搜索的结果，添加到缓存对象中
var k = $('#ipt').val().trim()
cacheObj[k] = res
}

3.5.3 优先从缓存中获取搜索建议

// 监听文本框的 keyup 事件
$('#ipt').on('keyup', function() {
// ...省略其他代码
// 优先从缓存中获取搜索建议
if (cacheObj[keywords]) {
return renderSuggestList(cacheObj[keywords])
}
// 获取搜索建议列表
debounceSearch(keywords)
})

4. 防抖和节流

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。

4.1 节流的引用场景

1. 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

2. 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

4.2 节流案例 – 鼠标跟随效果

1. 渲染UI结构并美化样式

<img src="./assets/angel.gif" alt="" id="angel" />
/* CSS 样式 */
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}#angel {
position: absolute;
}

2. 不使用节流时实现鼠标跟随效果

$(function() {
// 获取图片元素
var angel = $('#angel')
// 监听文档的 mousemove 事件
$(document).on('mousemove', function(e) { // 设置图片的位置
$(angel).css('left', e.pageX 'px').css('top', e.pageY 'px')
})
})

3. 节流阀的概念

节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。

当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。

每次执行操作前，必须先判断节流阀是否为空。

4. 使用节流优化鼠标跟随效果

$(function() {
var angel = $('#angel')
var timer = null // 1.预定义一个 timer 节流阀
$(document).on('mousemove', function(e) {
if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
timer = setTimeout(function() {
$(angel).css('left', e.pageX 'px').css('top', e.pageY 'px')
timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
}, 16)
})
})

4.4 总结防抖和节流的区别

防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！

节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！

阶段五： HTTP协议加强

1. HTTP协议简介

1.1 什么是通信

通信，就是信息的传递和交换。

通信三要素：通信的主体、通信的内容、通信的方式。

例一：张三要把自己考上传智专修学院的好消息写信告诉自己的好朋友李四。

通信的主体是张三和李四；

通信的内容是考上传智专修学院；

通信的方式是写信；

例二：服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。

通信的主体是服务器和客户端浏览器；

通信的内容是传智专修学院的简介；

通信的方式是响应；

1.2 什么是通信协议

通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。

通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。

1.2.1 互联网中的通信协议

客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。

网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol），简称 HTTP 协议。

1.3 HTTP

HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式。

例如：

客户端要以HTTP协议要求的格式把数据提交到服务器

服务器要以HTTP协议要求的格式把内容响应给客户端

1.3.1 HTTP 协议采用了请求/响应的交互模型。

HTTP 协议采用了 请求/响应 的交互模型。

学新通

2. HTTP请求

2.1 HTTP请求的消息

由于 HTTP 协议属于客户端浏览器和服务器之间的通信协议。因此，客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息。

注意：HTTP 请求消息又叫做 HTTP 请求报文。

2.2 HTTP请求消息的组成部分

学新通

2.2.1 请求行

学新通

2.2.2 请求头部

请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。

比如：User-Agent 用来说明当前是什么类型的浏览器；

Content-Type 用来描述发送到服务器的数据格式；

Accept 用来描述客户端能够接收什么类型的返回内容；

Accept-Language 用来描述客户端期望接收哪种人类语言的文本内容。

请求头部由多行键/值对组成，每行的键和值之间用英文的冒号分隔。

学新通

请求头部 – 常见的请求头字段

头部字段	说明
Host	要请求的服务器域名
Connection	客户端与服务器的连接方式(close 或 keepalive)
Content-Length	用来描述请求体的大小
Accept	客户端可识别的响应内容类型列表
User-Agent	产生请求的浏览器类型
Content-Type	客户端告诉服务器实际发送的数据类型
Accept-Encoding	客户端可接收的内容压缩编码形式
Accept-Language	用户期望获得的自然语言的优先顺序

关于更多请求头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers

2.2.3 空行

学新通

2.2.4 请求体

学新通

2.2.5 总结

学新通

3. HTTP响应

响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。

3.1 HTTP响应消息的组成部分

学新通

3.1.1 状态行

学新通

3.1.2 响应头部

学新通

关于更多响应头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers

3.1.3 空行

学新通

3.1.4 响应体

学新通

3.1.5 总结

学新通

4. HTTP请求方法

HTTP 请求方法，属于 HTTP 协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行的操作。最常用的请求方法是 GET 和 POST。

序号	方法	描述
1	GET	(查询)发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。
2	POST	(新增)向服务器提交资源（例如提交表单或上传文件）。数据被包含在请求体中提交给服务器。
3	PUT	(修改)向服务器提交资源，并使用提交的新资源，替换掉服务器对应的旧资源。
4	DELETE	(删除)请求服务器删除指定的资源。
5	HEAD	HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。
6	OPTIONS	获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。
7	CONNECT	建立一个到由目标资源标识的服务器的隧道。
8	TRACE	沿着到目标资源的路径执行一个消息环回测试，主要用于测试或诊断。
9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新。

5. HTTP响应状态代码

5.1 什么是HTTP响应状态码

HTTP 响应状态码（HTTP Status Code），也属于 HTTP 协议的一部分，用来标识响应的状态。响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次 HTTP 请求的结果是成功还是失败了。

学新通

5.2 HTTP响应状态码的组成及分类

HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。

HTTP 状态码共分为 5 种类型：

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作（实际开发中很少遇到 1** 类型的状态码）
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

完整的 HTTP 响应状态码，可以参考 MDN 官方文档 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

5.3 常见的HTTP响应状态码

学新通

阶段六：

1. Git

学新通

这篇好文章是转载于：编程之路

JavaScript -- ajax相关知识点的笔记

阶段一： 服务器的基本概念与初始Ajax

1. 客户端与服务器

2. URL地址

2.1 URL地址的组成

3. 分析网页的打开过程

3.1 图解客户端与服务器的通信过程

3.2 基于浏览器的开发者工具分析通信过程

4. 服务器对外提供了哪些资源

4.1 数据也是资源

4.2 网页中如何请求数据

4.3 资源的请求方式

5. 了解Ajax

5.1 Ajax的应用

6. jQuery中的Ajax

6.1 了解jQuery中的Ajax

6.2 $.get()函数的语法

6.2.1 $.get()发起不带参数的请求

6.2.2 $.get()发起不带参数的请求

6.3 $.post()函数的语法

6.3.1 $.post()向服务器提交数据

6.4 $.ajax()函数的语法

6.4.1 使用$.ajax()发起GET请求

6.4.2 使用$.ajax()发起POST请求

7. 接口

7.1 接口的请求过程

7.2 接口测试工具

7.2.1 接口文档

7.2.2 接口文档的组成部分

8. 案列

8.1 渲染图书列表

8.2 将用户输入的内容渲染到聊天窗口

8.3 发起请求获取聊天消息

8.4 通过 <audio> 播放语音

8.5 使用回车发送消息

阶段二： form表单与模块引擎

1. from 表单的基本使用

1.1 表单的组成部分

1.2 <from>标签的属性

1.3 表单的同步提交及缺点

2. 通过Ajax提交表单数据

2.1 监听表单提交事件

2.2 阻止表单默认提交行为

2.3 快速获取表单中的数据

2.3.1 serialize()函数

3. 案例 -- 评论列表

3.2 获取评论列表

4. 模板引擎的基本概念

4.1 渲染UI结构时遇到的问题

4.2 模板引擎

4.3 模板引擎的好处

5. art-template模板引擎

art-template简介：

5.1 使用传统方式渲染UI结构

5.2 art-template的使用步骤

5.3 art-template标准语法

5.3.1 标准语法 -- 输出

5.3.2 原文输出

5.3.3 条件输出

5.3.4 循环输出

5.3.5 过滤器

6. 模板引擎的实现原理

6.1 正则与字符串操作

6.1.1 基本语法

6.1.2 实现简易的模板引擎

阶段三：Ajax加强

1. XMLHttpRequest的基本使用

1.1 使用xhr发起GET请求

1.2 了解xhr对象的readyState属性

1.3 使用xhr发起POST请求

1.4 查询字符串

1.4.1 GET请求携带参数的本质

1.5 URL编码与解码

1.5.1 URL编码

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

1.5.3. URL编码的注意事项

1.6 使用xhr发起POST请求

2. 数据交换格式

2.1 什么是数据交换格式

2.2 XML

阶段一：服务器的基本概念与初始Ajax