这段时间正在学关于Ajax的内容,现在我将我所了解到的Ajax给大家分享一下(学习笔记)可能有理解不对的地方大家指正。
1.前后端通信
1.1前后端通信是什么
前后端通信字面意思就是,前端和后端数据交互的过程,也就是浏览器和服务器之间数据交互的过程。有时候前端需要从后端获取数据,后端也需要从前端发过来的数据,所以前后端的通信就是它们各求所需的一个过程
1.1.2后端向前端发送数据
以CSDM为例,我们可以打开开发者工具->网络(Network),此时我们刷新页面,就能够看到各种各样的数据,里面会有HTML、CSS、JS、图片等等文件,前端向后端获取的这些数据数据浏览器进行解析后,我们就能看到一个完整的网页页面了
![](https://i-blog.csdnimg.cn/blog_migrate/09c7af153c2554bc93efeca815c54470.png)
1.1.3前端向后端发送数据
很简单的例子,我现在正在写文章,当我点击发布以后,前端就会向后端发送数据,此时文章就会保存在数据库中,当有用户需要访问文章时,后端又会将数据发送到前端。
1.2前后端通信的过程
1.2.1前后端通信的过程
如图,服务器不是单独为谁而服务的,它可以服务很多的浏览器。一般情况下前后端的通信都是浏览器主动去联系服务器。
需要通信的时候浏览器主动发送请求到服务器,如果有数据的话还会携带着数据一起发送到服务器,当服务器收到浏览器的请求,就会根据请求发送响应到浏览器,如果有数据的话就会携带着数据一起发送到服务器,即前后端的通信是在“请求——响应”中完成的
![](https://i-blog.csdnimg.cn/blog_migrate/e7d1fe11f0a6e50c59cc3d7fd56ea83d.png)
1.2.2概念解释
通常我们都会听到几个词:前端,浏览器端,客户端,后端,服务器端,那这几个端又有什么区别呢?
其实前端指的就是浏览器端。
客户端是指只要能和服务器进行通信的就是客户端,就不仅是浏览器端了,比如我们平常打游戏需要安装客户端;命令行工具也是客户端,因为他也能够向服务器发送请求,而且服务器也能向它发送响应,但是是命令行工具无法解析发送过来的数据。
后端呢也就指的是服务器端了
1.3前后端的通信方式
1.3.1浏览器访问网页
当我们在浏览器地址栏输入网址并访问的时候,前后端就进行通信了。
1.3.2HTML的标签
浏览器在解析HTML标签的时候,遇到一些特殊的标签(link,img,script,iframe),会再次向服务器发送请求。还有一些标签,浏览器在解析的时候,不会向服务器发送请求,但是用户可以使用他们向服务器发送请求比如:a,form
1.3.3Ajax和Fetch
这两种方式呢后面会说到
2.HTTP协议
2.1HTTP是什么
2.1.1HTTP是什么
全称HyperText Transfer Protocol,即超文本传输协议。
超文本:原先一个一个的单一文本,通过超链接将其联系起来,由原先的单一文本变成了可无限延伸、扩展的超文本、立体文本。
协议:文件在传输的时候需要遵守的规范
HTML、JS、CSS、图片、视频等等文件,都是通过HTTP在服务器和浏览器之间传输
HTTP是一个‘请求-响应’协议,具体的一些细节呢可以通过学习一些计算机网络的知识来完善
2.2HTTP报文
2.1.1HTTP报文是什么
HTTP通信过程包括客户端往服务器端发送请求会产生请求报文,以及服务器端给客户端返回响应会产生响应报文两个过程。HTTP报文是HTTP应用程序之间发送的数据块
2.1.2HTTP报文格式
![](https://i-blog.csdnimg.cn/blog_migrate/eaf74994cadcb9d8e7e389565d06d53d.png)
注意:GET请求是没有请求体的,数据是通过请求体携带的;POST请求有请求体的,数据是通过请求体携带的。
我们可以通过打开开发者工具查看
![](https://i-blog.csdnimg.cn/blog_migrate/a41a2e3148ddea66c376b92b79e2e3bc.png)
2.2HTTP方法
2.2.1常用的HTTP方法
HTTP方法是浏览器发送请求时采用的方法,和响应无关。有GET,POST,PUT,DELETE.
是用来定义对于资源采取什么样的操作的,有各自的语义
2.2.2HTTP方法的语义
①GET:获取数据。即获取资源(文件),比如HTMML、CSS、图片等等
②POST:创建数据。可以用来注册之类的
③PUT:更新数据。修改个人信息,修改密码的时候使用
④DELETE:删除数据。删除一些评论,文章之类的。
虽然这些方法都有各自的语义,但是并是不强制性的,
2.2.3RESTful接口设计
是一种设计风格,充分利用HTTP方法的语义。
首先我们吧一个地址简单的理解为前后端的一个接口,前端向地址发送请求,后端将数据发送的地址上,前端再访问返回的地址就得到信息了,举几个例子吧:
通过用户ID获取个人信息,使用GET方法:https://www.xxx.com/api/http/getUser?id=1 -> https://www.xxx.com/api/http/getUser?id=1
注册新用户,使用POST方法:https://www.xxx.com/api/http/addUser -> https://www.xxx.com/api/http/user
删除一个用户,使用DELETE方法https://www.xxx.com/api/http/modifyUser -> https://www.xxx.com/api/http/user
我们可以不用这么麻烦,每个操作都设置不同的接口(前者),后端可以根据前端的请求GET,POST,PUT,DELETE他们的语义就知道,具体要进行增删改查一系列的操作了
2.3HTTP状态码
2.3.1HTTP状态码是什么
404大家一定不陌生,这就是一个HTTP状态码,表示客户端发生了错误。HTTP状态码是定义服务器对请求的处理结果,是服务器返回的数字
2.3.2HTTP状态码语义
我们可以通过开发者工具来查看每个响应的状态码
![](https://i-blog.csdnimg.cn/blog_migrate/509fcfd930247e7d5ca3015ae3df34bb.png)
100~199消息:代表请求已被接受,需要继续处理
200~299消息:成功
300~399消息:重定向,如301(永久性的被移过去了,永久性缓存)
302(临时性移动)
304(浏览器缓存没有被修改,可以继续使用)
400~499消息:服务器有响应,请求错误,一般错在前端,如404(NotFound)没有请求到
500~599消息:服务器错误
3.Ajax
3.1Ajax初识
3.1.1Ajax是什么
Ajax全称是Asynchronous Javascript and XML(异步JavaScript和XML)
Ajax可以异步的向服务器发送请求,在等待响应的过程中,不会阻塞当前页面,浏览器可以做自己的事情,知道成功获取响应后,浏览器才开始处理响应数据。就是浏览器与服务器之间的一种异步通信方式。
3.1.2XML(可扩展标记语言)
是前后端数据通信是传输数据的一种格式,不过现在常用的都是JSON
3.2XMLHttpRequest对象
3.2.1XHR的属性
(1)reponseText文本形式的响应内容
(2)response:可以替代(1)
(3)responseType
①默认值是空字符串或者text,得到的数据都是字符串类型的
②当responseType设置的值是json时,可以直接得到JSON类型的数据
③当responseType设置的值是"JSON"时候,responseText就不能用了,而任何时候都可以使用response来得到数据
(4)timeout属性(设置请求的超时时间单位ms),超时了就会发生timeout事件
(5)withCredentials属性:可以指定使用Ajax发送请求时是否携带Cookie
①正常情况下,使用Ajax发送请求时,默认情况下,同域会携带Cookie;跨域时不会,这个时候就可以使用withcccCredentials
②最终能否成功跨域携带Cookie,还要看服务器同不同意
(6)readyState
![](https://i-blog.csdnimg.cn/blog_migrate/aecc74028b29566f2d56390472f5da27.png)
3.2.2XHR的事件
xhr.onreadystatechange :之后每次 xhr.yreadyState 变化时触发,但是xhr.readyState从非0到0,xhr.onreadyStatechange不会被触发
xhr.onloadstart :调用send()时触发
xhr.onload:请求成功是触发(xhr.readystat=4)
xhr.onloadend:请求结束时触发
xhr.onabort:当调用xhr.abort()时触发
xhr.ontimeout:xhr.timeout不等于0,当xhr.timeout设置的时间请求还未结束,则会触发(请求超时)
xhr.onerror:请求发生错误触发
8.httpCodeError事件,状态码异常
3.2.3HXR的方法
(1)open()方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息
(2)send()发送请求给服务器
(3)abort()方法:终止当前请求,一般配合abort事件一起使用
(4)setRequestHeader设置请求头信息。其中,请求头中的Content-Type字段告诉服务器,浏览器发送的数据是什么格式的
3.3Ajax基本用法
3.3.1XMLHttpReuest
Ajax想要实现浏览器与服务器之间的异步通信,需要依靠XMLHttpReuest,它是一个构造函数,不论是XMLHttpReuest,还是Ajax,都没有具体的某种数据格式绑定
3.3.2Ajax的使用步骤
直接附上注释代码吧,这里用的是免费的HTTP请求假数据接口JSONPlaceHolder,请求的到的是JSON格式的数据,下面会讲到JSON
// Ajax 的使用步骤
// 1.创建 xhr 对象
// const xhr = new XMLHttpRequest();
// 2.监听事件,处理响应
// 当获取到响应后,会触发 xhr 对象的 readystatechange 事件,可以在该事件中对响应进行处理
// xhr.addEventListener('readystatechange', () => {}, fasle);
// xhr.onreadystatechange = () => {
// if (xhr.readyState !== 4) return;
// // HTTP CODE
// // 获取到响应后,响应的内容会自动填充 xhr 对象的属性
// // xhr.status:HTTP 200 404
// // xhr.statusText:HTTP 状态说明 OK Not Found
// if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
// // console.log('正常使用响应数据');
// console.log(xhr.responseText);
// }
// };
// readystatechange 事件也可以配合 addEventListener 使用,不过要注意,IE6~8 不支持 addEventListener
// 为了兼容性,readystatechange 中不使用 this,而是直接使用 xhr
// 由于兼容性的原因,最好放在 open 之前
// readystatechange 事件监听 readyState 这个状态的变化
// 它的值从 0 ~ 4,一共 5 个状态
// 0:未初始化。尚未调用 open()
// 1:启动。已经调用 open(),但尚未调用 send()
// 2:发送。已经调用 send(),但尚未接收到响应
// 3:接收。已经接收到部分响应数据
// 4:完成。已经接收到全部响应数据,而且已经可以在浏览器中使用了
// 2.3.准备发送请求
// xhr.open(
// 'HTTP 方法 GET、POST、PUT、DELETE',
// '地址 URL https://www.xxx.',
// true
// );
// 调用 open 并不会真正发送请求,而只是做好发送请求前的准备工作
// 2.3.发送请求
// 调用 send() 正式发送请求
// send() 的参数是通过请求体携带的数据
// xhr.send(null);
// 3.使用 Ajax 完成前后端通信
const url = 'https://jsonplaceholder.typicode.com/posts?userId=5';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText);
console.log(typeof xhr.responseText);
}
};
xhr.open('GET', url, true);
xhr.send(null);
![](https://i-blog.csdnimg.cn/blog_migrate/efbff6bd320919c89787359afaef912a.png)
4.JSON(JavaScriptObject Notation)
4.1JSON是什么
JSON全称JavaScript Object Notation。翻译为“JavaScript 对象表示法”,是一种轻量级的、基于文本的、开放的数据交换格式。JSON 在 Web 开发领域有着举足轻重的地位。是Ajax发送 和接受数据的一种格式
4.2JSON的三种形式
4.2.1简单值形式
JSON的简单值形式就是对应着JS中的基础数据类型。数字、字符串、布尔值、null,特别值得注意的是JSON中是没有undefined格式的,而字符串也必须使用双引号,JSON也不支持注释
"str"
4.2.2对象形式
对象的属性名必须用双引号,属性值如果是字符串也必须用双引)号,只要涉及到字符串,就必须 使用双引号。一样的,不支持undefined
{
"students": [
{
"id": 1,
"name": "张三",
"gender": "男",
"birthday": "1999-05-23",
"address": "北京市海淀区",
"email": "zhangsan@example.com",
"phone": "13333333333"
},
{
"id": 2,
"name": "李四",
"gender": "女",
"birthday": "1998-09-12",
"address": "北京市朝阳区",
"email": "lisi@example.com",
"phone": "15555555555"
},
{
"id": 3,
"name": "王五",
"gender": "男",
"birthday": "2000-01-01",
"address": "北京市东城区",
"email": "wangwu@example.com",
"phone": "17777777777"
}
],
}
4.2.3数组形式
JSON也可以是数组形式。不支持undefined
[1,"hello",true,null]
4.2.4JSON的常用方法
①JSON.parse() 将JSON格式的字符串解析成JS中的对应值
②JSON.stringify() 将JSON格式的JS中的值解析成JS中对应值字符串
③必须是合法的JSON字符串,否则会报错
4.3运用
以JSONPlaceHolder为数据服务,获取信息,并将信息打印在浏览器上
const url = 'https://jsonplaceholder.typicode.com/posts?userId=5';
// 添加监听
const xhr = new XMLHttpRequest();
// 准备发送,做好发送请求前的准备工作
xhr.addEventListener('load', function () {
if (status >= 200 || status < 300 || status === 304) {
console.log(xhr.response);
//JSON->JS
const data = JSON.parse(xhr.response);
// 遍历数组
let allLi = '';
for (let i = 0; i < data.length; i++) {
const oneLi = `<li>${data[i].userId} -
${data[i].id} -
title:${data[i].title}</li><br>`;
allLi = allLi + oneLi;
}
//上树
document.querySelector("#posts").innerHTML = allLi;
} else {
console.log('get server error response');
}
})
xhr.open('GET', url, true);
// 发送请求
xhr.send(null);
![](https://i-blog.csdnimg.cn/blog_migrate/a276eada29a7189efca5beb209ba437e.png)