Ajax笔记

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心有 JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

6 jQuery中的Ajax

6.1 概述

原生的XMLHttpRequest用法比较复杂，所以对其进行了封装，提供了一系列Ajax相关的函数，极大降低了Ajax的使用难度

页面非加载页面状态下和服务器通信

最常用的三个方法：$.get(); $.post(); $.ajax();

6.2$.get()函数的语法

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

语法：

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

参数：url要请求的资源地址参数类型是string，必选

data请求资源期间要携带的参数，参数类型是object，不是必写

callback，函数类型，请求成功的回调函数，不是必选

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

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

$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {

console.log(res) //这里的res是服务器响应的数据

})

响应回来的数据格式不是固定的，是后端程序员--服务器端说了算的。

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

$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 1}, function(res) {

console.log(res)

})

将data对象自动拼接到请求的地址的后面，响应返回的数据。

6.4 $.post()函数的语法

功能单一，专门用来发起post请求，从而向服务器提交数据

$.post(url, [data], [callback]) 参数与get方法相似

6.5 $.ajax()函数的语法

相比于$.get()和$.post()函数，jQuery中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对于ajax请求进行更详情的配置

语法：

$.ajax({

type(method也可以): ' ', //请求的方如GET或POST

url: ' ', //请求的URL地址

data: {}, //这次请求要携带的数据

success: function(res) {} //回调函数

})

6.5 $.ajaxPrefilter函数

注意：每次调用$.get(),$.post()或$.ajax()时会先调用这个函数

在这个函数中,可以拿到我们给Ajax提供的配置对象

options参数代表发送ajax请求时的请求数据

$.ajaxPrefilter(options) {

在发起真正的Ajax请求之前,统一拼接请求的根路径

options.url = "根路径" + options.url

}

6.6 jQuery中的回调函数

7 接口

7.1 接口的概念

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

7.2 分析接口的请求过程

7.2.1 通过get方式请求接口的过程

7.2.2 通过post方式请求接口的过程

7.3 接口测试工具

（1）什么是接口测试工具

好处：可以在不写代码的情况下，测试接口是否可用

（2）下载安装PostMan（主页下载）

（3）了解PostMan界面的组成：从上到下，从左到右：菜单、工具、左侧历史记录与集合、请求你页签、请求地址区域、请求参数区域、响应结果区域、状态栏。

7.4 使用postman测试post接口

选择请求的方式
填写请求的URL地址
选择Body面板并勾选数据格式（x-www）
填写要发送到服务器的诗句
点击Send按钮发起POST请求
查看服务器响应的结果

7.5 接口文档

（1）什么是接口文档

接口的说明文档，他是我们调用接口的依据

（2）接口文档的组成部分

接口名称：用来标识各个接口的简单说明
接口URL：接口的调用地址
调用方式：接口的调用方式
参数格式：接口需要传递的参数
响应格式：接口的返回值的详细说明，一般包括数据名称、数据类型、说明3项内容

（3）路径

./ 当前路径

../ 上一级

/ 下一级

8 from表单的基本使用

8.1 什么是表单

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

8.2 表单的组成部分

（1）表单标签：<from></from>

（2）表单域：包含了文本框、密码框、隐藏域、多行文本框、下拉选择框等

（3）表单的按钮：submit、<button type='submit'></button>

8.3 <from>标签的属性

8.3.1 action属性

用来规定当提交表单时，向何处发送表单数据

action属性值是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据

当<from>表单在未指定action属性值的情况下，action的默认值为当前页面的URL地址

注意：当提交表单后，页面会立即跳转到action属性指定的URL地址。

8.3.2 target属性

用来规定在何处打开action URl

值：

_blank 在新窗口打开
_self 默认，在相同的框架中打开（当前窗口）
_parent 在父框架集中打开（很少使用）
_top 在整个窗口中打开（很少使用）
framename 在指定的框架中打开（很少使用）

8.3.3 method属性

method属性用来规定以何种方式把表单数据提交action URL。

它的可选值有两个，分别是get（会在URL地址中体现出来？后面为提交的值，=前为提交的name，=后为提交的值，两个数据间用&连接。实质就是一个查询字符串）和post（不会体现在URL中，会在Network中的form data中显示，实质就是通过data发送信息）

注意：

get方式适合用来提交少量、简单的数据
post方式适合用来提交大量的、复杂的、或包含文件上传的数据
在实际开发中，<from>表单的post提交方式用的最多，很少用get。

8.3.4 enctype属性

发送表单数据之前如何对数据进行编码

可选值有三个，默认情况下，值为application/x-www-form-urlencoded

注意：

在涉及文件上传的操作时，必须将enctype的值设置为multipart/form-data

如果表单的提交不涉及到文件上传操作时，则直接将enctype的值设置为application/x-www-form-urlencoded即可！

8.4 表单的同步提交及缺点

8.4.1 什么是同步提交

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到actionURL的行为

8.4.2 缺点

（1）<from>表单同步提交后，整个页面会发生跳转，跳转到actionURL所指向的地址，用户体验差

（2）页面之前的状态和数据会丢失

9 通过Ajax提交表单的数据

9.1 监听表单提交事件

方式一：

$('from').submit(function(event) {

alert('监听到了表单的提交事件')

})；

方式二：

$('form').on('submit', function(event)

{

alert('监听到了表单的提交事件')

});

9.2 阻止表单的默认提交行为

当监听到表单的提交事件后，可以调用事件对象的event.preventDefault()来阻止

9.3 快速获取表单中的数据

9.3.1 serialize（）函数

为了简化表单中数据获取操作，jQuery提供了serialize函数

$(selector).serialize()

好处：可以一次性获取到表单中的所有的数据，拼接成查询字符串的格式

9.3.2 示例

</from>

$("#form1").serialize() //调用的结果：username=用户名的值$password=密码的值（仍可以通过post发送给服务器）

要想使用serialize（）函数快速获取表单中数据，必须给每个表单元素添加name属性

9.3.3 补充reset（）方法

原生js reset（）方法 //重置表单

toUpperCase()字符串转换为大写,返回变成大写后的字符串,str.toUpperCase()

toLowerCase()变小写

input表单填充功能autocomplete,取值off/on

10 模板引擎的基本概念

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

10.2 什么是模板引擎

可以根据程序员的模板结构和数据，自动生成一个完整的HTML页面

10.3 好处

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

（2）使代码结构更清晰

（3）使代码更易于阅读和维护

11 art-template模板引擎

11.1 简介（王婆卖瓜自卖自夸）

11.2 安装和操作

（1）http://aui.github.io/art-template/zh-cn/docs/installation.html页面下载链接。

（2）

（3）代码使用示例：

//引入jQuery文件，art-template js文件

<body>

<div  id="container"></div>

<script type="text/html" id="tpl-user">

//{{是个占位符}}，对象的属性名

<h1>{{name}}   --------    {{age}}</h1>

</script>

<script>

var data = {name: "zs", age: 12}

var htmlStr = template("#tpl-user", data);

$('#container').html(htmlStr);

</script>

</body>

11.3 标准语法

（1）输出

{{}}中，可以进行变量的输出，对象属性的输出...

（2）原文输出

（3）条件输出

（4）循环输出

（5）过滤器

需处理的值经过过滤函数返回处理后的值

可以多次引用函数 {{ value | 函数 | 函数}}，一级一级计算

12 模板引擎的实现原理

12.1 正则与字符串操作

12.1.1 基本语法

exec（）用于检索字符串中的正则表达式的匹配

如果有匹配的值，则返回该匹配的值，否则返回null

var str = '你好，hello'

var pattern = /[a-z]+/

console.log(pattern.exec(str)) //hello

12.1.2 分组

正则表达式中（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

正则分组

0号组：表达式的整体

1-n（从外到里，从左向右的顺序）号组：（）划分的组 //（）的作用是，从匹配的结果中，划分出一个组

12.1.3 replace（）函数

用于在字符串中用一些字符替换另一些字符（返回的结果是替换后的新字符串）

12.1.4 多次replace

（1）使用while循环replace

（2）replace替换真值

var data = {name: '张三'， age: 20}

patternResult[1] ——————>data[patternResult[1]]

13 XMLHttpRequest的基本使用

13.1 什么是XMLHttpRequest

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

13.2 使用xhr发起GET请求

步骤:

(1)创建xhr对象,一个请求的主体

var xhr = new XMLHttpRequest()

(2)调用xhr.open()函数,开启一个请求 //不区分大小写,不过推荐大写

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

(3)调用xhr.send()函数

xhr.sent()

(4)监听xhr.onreadystatechange事件

xhr.onreadystatechange = funciton() {

if(xhr.readyState === 4(请求完成) && xhr.status === 200(请求成功)) { //判断的属性的status是创建对象xhr里的属性,代表服务器响应的状态,不可以更改

console.log(xhr.responseText) //响应回数据中的status,是服务器端返回数据的状态,通过后端可以更改

}

13.3 了解xhr对象的readyState属性

表示当前Ajax请求所处的状态

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

使用xhr对象发起带参数的GET请求时,只需在调用xhr.open期间,为URL地址指定参数即可,?后叫做查询字符串(get后data传参值,和?查询字符串的功能一致,13.6)

13.5 查询字符串

(1)概念

是指在URL的末尾加上用于向服务器发送信息的字符串(变量)

(2)格式

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

13.6 get请求参数的本质

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

13.7 URL编码与解码

(1)什么是URL编码

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

如果要使用中文,则必须对中文字符进行编码(转义)

原则:使用安全的字符去表示那些不安全的字符(使用英文字符去表示非英文字符)

(2)如何对URL进行解码和编码

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

encodeURI()编码

decodeURI()解码

13.8 使用xhr发起POST请求

步骤

(1)创建xhr对象,一个请求的主体

var xhr = new XMLHttpRequest()

(2)调用xhr.open()函数,开启一个请求

xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')

(3)设置Content-Type属性(固定写法)

//客户端告诉服务器实例发送的数据类型

xhr.setRequestHeader('Conetnt-Type','application/x-www-form-urlencoded')

(3)调用xhr.send()函数

xhr.sent('')(提交数据使用字符串格式,多个数据使用&连接,不可以在open中拼接字符串,需要在sent中写入)

(4)监听xhr.onreadystatechange事件

xhr.onreadystatechange = funciton() {

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

console.log(xhr.responseText) //得到的是一个JSON字符串

}

14 数据交换格式

14.1 什么是数据交换格式

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

前端领域,经常提及的两种数据交换格式分别是XML和JSON

XML:标签格式

JSON:像数组,对象的格式的字符串(是一种特殊的格式)

14.2 XML

(1)全称是EXtensible Markup Language,即可扩展标记语言,因此,XML和HTML类似,也是一种标记语言

(2)XML和HTML的关系

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

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

(3)XML格式的缺点

XML格式臃肿,和数据无关的代码多,体积大,传输效率低
在js中解析XML比较麻烦

14.3 JSON

（1）即JavaScript对象表示法,简单来讲,JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象和数组的信息,因此,JSON的本质是字符串。

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

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

14.3.1 json的两种结构

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

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

14.3.2 JSON语法注意事项

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON中不允许使用单引号表示字符串
JSON不允许写注释
JSON的最外层必须是对象和数组格式
不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据
JSON的本质:用字符串来表示JavaScript对象数据和数组数据

14.3.3 JSON和js对象的关系

JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串

14.3.4 JSON和JS对象的互转

要实现JSON和JS的转换,JSON字符串转换为js对象使用JSON.parse()方法

js对象转换为JSON字符串,使用JSON.stringify()方法(格式没有特殊要求,但是不合法的格式不会被识别出来)

14.3.5 序列化和反序列化

把数据对象转换为JSON字符串

15 封装自己的Ajax函数

15.1 要实现的效果

15.2 定义options参数选项

method 请求的类型

url 请求的URL地址

data 请求携带的数据

success 成功之后的回调函数

15.3 处理data参数

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

15.3 定义函数

15.4 判断请求类型

16 XMLHttpRequest Level2的新特性

16.1 认识XMLHttpRequest Level2

16.1.1 旧版的缺点

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

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

16.1.2 Level2的新功能

可以设置HTTP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获取数据传输的进度信息

16.2 设置HTTP请求的时限

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

xhr.timeout = xxx;(单位是毫秒)

与之配套的还有一个timeout事件,用来指定回调函数

16.3 FormData对象管理表单数据

16.3.1

为了方便表单处理,HTML5新增了一个FormData对象,可以模拟表单操作(直接打印无法获取FormData实例中的数据,需要使用forEach来遍历,打印数据)

(1)创建FormData实例

var fd = new FormData()

(2)为FormData添加表单项

fd.append('uname', 'zs')

fd.append('upwd', '123456')

可以通过foreach遍历得到添加的数据（属性值，属性名，本身）

获取第一个值:实例.get(value)

实例.getAll(key)获取所有值

修改:实例.set(key, value)

删除:实例.delete(value)

(3)创建XHR对象

var xhr = new XMLHttpRequest

(4)指定请求类型与URL地址

xhr.open('POST', 'xxx')

(5)直接提交FormData对象,这与提交网页表单的效果,完全一样

xhr.send(fd);

16.3.2 FormData对象也可以获取网页表单的值

此对象收集数据时,只会收集有name属性的表单元素的数据

(1)通过DOM操作,获取到form表单元素

var form = document.querySelector('#form1');

(2) 监听表单元素的submit事件

form.addEventListener('submit', function(e) {

//阻止表单点击跳转默认行为

e.preventDefault();

(3)根据form表单创建FormData对象,会自动将表单数据填充到FormData对象中

var fd = new FormData(form);

var xhr = new XMLHttpRequest();

xhr.open('POST', 'url')

xhr.send(fd);

xhr.onreadystatechange = function() {

}

})

16.4 上传文件

步骤:

① 定义UI 结构

<br />

② 验证是否选择了文件

var btnUpload = document.querySelector('#btnUpLoad');

btnUpload.addEventListener('click', funciton() {

//表单文件类型DOM对象中files属性获取当前上传的对应的文件,以伪数组的形式存储,拥有length属性

var files = document.querySelector('#file1').files

if(files.length <= 0) {

return alert('请选择要上传的文件!')

}

})

③ 向 FormData 中追加文件

var fd = new FormData();

fd.append('avatar', files[0]);

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

var xhr = new XMLHttpRequest();

xhr.open("POST", 'http://www.liulongbin.top:3006/api/upload/avatar')

xhr.send(fd);

setRequestHeader的使用说明:将上传的数据进行处理,常用的application/x-www...是将数据变为value/key的形式发送给服务器,不写的话会把传入的原数据直接发送,如果服务器没有写相应的提取信息的代码,则无法正确读取信息,因为上述fd中本来就是键值对]形式的对象,所以不需要写这一项代码

⑤ 监听 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 {

console.log('图片上传失败' + data.message)

}

(binary)二进制文件

16.5 显示文件的上传进度

新版本XHR对象中,可以通过监听xhr.upload.onprogress事件,来获取到文件的上传进度.

e.loaded(); 已传输的的字节

e.total();需传输的总字节

17 jQuery高级用法

17.1 使用jQuery实现文件上传

17.1.1 定义UI结构

17.1.2 验证是否选择了文件

17.1.3 向FormData中追加文件

// 向 FormData 中追加文件

var fd = new FormData()

fd.append('avatar', files[0])

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

contentType: false 发送信息至服务器时内容编码类型,false为不对字符编码(涉及文件的上传需要multipart/form-data)

processData: false 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，需设置为 false。jQuery默认会将传入的数据转换为查询字符串，可以配合请求头数据的默认类型，若不想转换为查询字符串，需要将此值设置为false同时也将contentType设置为false，表示不使用application/x-www-form-urlencoded默认类型。

17.2 jQuery实现loading效果

17.2.1 ajaxStart(callback)

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

//自jQuery版本1.8起,改方法只能被附加到文档

$(document).ajaxStart(function() {

$('#loading').show()

})

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

17.2.2 ajaxStop(callback)

Ajax 请求结束时，执行 ajaxStop 函数。

18 axios

18.1 什么是axios

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

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

18.2 axios发起GET请求

axios发起get请求的语法

get请求必须放在{parmes：数据对象}，post请求可以省略data，直接{数据对象}

res获取的结果是axios处理过的数据

res.data才是原始数据

18.3 axios发起POST请求

18.4 直接使用axios发起请求

19 同源策略和跨域

19.1 同源策略

19.1.1 什么是同源

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

http://www.baidu.com:443/index.html

http 协议

www.baidu.com 域名

443 端口

19.1.2 什么是同源策略

是浏览器提供了一个安全功能

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

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

无法读取非同源网页的Cookie\localStorage和IndexedDB

无法接触非同源网站的DOM

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

19.2 跨域

19.2.1 什么是跨域

协议,域名,端口不一致时,就是跨域

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

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

注意:浏览器允许发起跨域请求,但是跨域请求回来的数据,会被浏览器拦截,无法被页面获取到

跨域错误:

19.2.3 如何实现跨域请求

解决方案:主要JSONP和CORS两种

JSONP:出现的早,兼容性好,是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案,缺点是只支持GET请求,不支持POST请求

请求的时候可以使用<script>标签引入网络资源,再通过后端处理为js格式交给前端处理。

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

20 JSONP

20.1 什么是JSONP

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

20.2 JSONP的实现原理

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

凡是src属性都不受跨域的限制

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

20.3 自己实现一个简单的JSONP

(1)<script>

function success(data) {

console.log('拿到了Data数据:');

console.log(data) }</script>

(2)getdata.js:

success({ name: 'zs', age: 20 })

20.4 JSONP的缺点

由于JSONP是通过<script>标签的src属性,来实现跨域数据获取的,所以,JSONP只支持GET数据请求,不支持POST请求(JSONP只是通过src属性来请求数据,src是一个url,而通过url请求数据的方式是GET请求(查询字符串拼接到url形式),POST发送的请求是不能通过url的查询字符串来实现的(通过请求体发送),所以JSONP方法只支持GET请求)

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

20.4 jQuery中的JSONP

jQuery提供的$.ajax()函数,除了可以发起真正的Ajax数据请求外,还能发起JSONP数据请求

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

20.6 自定义回调函数的名称

通过jsonp修改发送到服务端的参数名称,默认为callback

通过jsonpCallback自定义回掉函数的名称,默认为jQueryxxx格式

20.7 jQuery中JSONP的实现过程

也是通过<script>标签的src属性来实现的,不过,jQuery采用的是动态创建和移除<script>标签

在发起JSONP请求的时候,动态想<header>中append一个<script>标签;
在JSONP请求成功以后,动态从<header>中移除刚才append进去的<script>标签;.

21 防抖和节流

21.1 什么是防抖

是当事件被触发后,延迟n秒后再执行回调,如果在n秒内事件又被触发,则重新计时

事件被频繁触发时,可以保证只执行一次事件

21.1.1 节流防抖的理解

21.1.2 防抖的应用场景,输入框防抖

21.2 什么是节流

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

21.3 节流的应用场景

当鼠标连续不断地触发某时间，只在单位时间内触发一次

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

21.3.1 节流阀的概念

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

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

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

21.4 防抖和节流的区别

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

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

22 http协议加强

22.1 什么是通信

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

通信的主体:服务器和客户端浏览器;

通信的内容:传智专修学院的简介;

通信的方式:响应;

22.2 什么是通信协议

Communication Protocol是指通信的双方完成通信所遵守的规则和约定.

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

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

网页内容又叫做超文本,因此网页内容的传输协议又叫做超文本传输协议(HyperText Transfer Protocol),简称HTTP协议

22.3 什么是HTTP协议

HTTP协议即超文本传输协议,它规定了客户端与服务器之间网页内容传输时,所必须要遵守的传输格式

22.3.1 HTTP协议的交互模型

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

23 HTTP请求消息

23.1 什么是HTTP请求消息

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

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

23.2 HTTP请求消息的组成部分

HTTP请求消息由请求行(request line),请求头部(header),空行和请求体4个部分组成

23.2.1 请求行

由请求方式,URL和HTTP协议版本3个部分组成,他们之间使用空格隔开

POST api/addbook HTTP/1.1

23.2.2 请求头部

请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。比如：User-Agent 用来说明当前是什么类型的浏览器； Content-Type 用来描述发送到服务器的数据格式；Accept 用来描述客户端能够接收什么类型的返回内容；Accept-Language 用来描述客户端期望接收哪种人类语言的文本内容。

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

常见的请求头字段

23.2.3 空行

用来分隔请求头部和请求体

23.2.4 请求体

请求体中存放,是要通过POST方式提交到服务器的数据

注意:只有POST请求才有请求体,GET请求没有请求体

一般是查询字符串格式,浏览器会美化格式展示给我们.

24 HTTP响应消息

24.1 什么是响应消息

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

24.2 HTTP响应消息的组成部分

24.2.1 状态行

状态行由 HTTP 协议版本、状态码和状态码的描述文本 3 个部分组成，他们之间使用空格隔开;

HTTP/1.1 200 OK

24.2.2 响应头部

响应头部用来描述服务器的基本信息。响应头部由多行键/值对组成，每行的键和值之间用英文的冒号分隔.

24.2.3 响应体

响应体中存放的，是服务器响应给客户端的资源内容。

25 请求方法

25.1 什么是HTTP请求方法

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

25.2 HTTP的请求方法

26 HTTP响应状态码

26.1 什么是响应状态码

也属于HTTP协议的一部分,用来标识响应的状态

响应状态码会随着响应消息一起被发送至客户端浏览器,浏览器根据服务器返回的响应状态码,就能知道这次HTTP请求的结果是成功还是失败了

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

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

26.2.1 2**成功相关的响应状态码

26.2.2 3**重定向相关的响应状态码

26.2.3 4**客户端失败相关的响应状态码

26.2.4 5**服务器失败相关的响应状态码

27 RESTful表述性状态转移

所有的资源都统一接口，只通过接口的方法（get，post，put，delete）来区分不同的请求

半自动学习机丶

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Ajax笔记

重要部分>重点标注>次重要标注>理解说明>补充说明1 客服端和服务器1.1 上网的目的通过互联网形式获取和消费资源1.2 服务器上网过程中，负责存放和对外提供资源的电脑，叫做服务器，本质上是一台电脑。1.3 客户端上网过程中，负责获取和消费资源的电脑2 URL地址2.1 概念全称是UniformResourceLocator中文叫统一资源定位符，用于标识互联网上每个资源唯一的存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从
复制链接

扫一扫

专栏目录