这段时间正在学关于Ajax的内容，现在我将我所了解到的Ajax给大家分享一下（学习笔记）可能有理解不对的地方大家指正。
1.前后端通信
1.1前后端通信是什么
前后端通信字面意思就是，前端和后端数据交互的过程，也就是浏览器和服务器之间数据交互的过程。有时候前端需要从后端获取数据，后端也需要从前端发过来的数据，所以前后端的通信就是它们各求所需的一个过程
1.1.2后端向前端发送数据
以CSDM为例，我们可以打开开发者工具->网络(Network)，此时我们刷新页面，就能够看到各种各样的数据，里面会有HTML、CSS、JS、图片等等文件，前端向后端获取的这些数据数据浏览器进行解析后，我们就能看到一个完整的网页页面了
1.1.3前端向后端发送数据
很简单的例子，我现在正在写文章，当我点击发布以后，前端就会向后端发送数据，此时文章就会保存在数据库中，当有用户需要访问文章时，后端又会将数据发送到前端。
1.2前后端通信的过程
1.2.1前后端通信的过程
如图，服务器不是单独为谁而服务的，它可以服务很多的浏览器。一般情况下前后端的通信都是浏览器主动去联系服务器。
需要通信的时候浏览器主动发送请求到服务器，如果有数据的话还会携带着数据一起发送到服务器，当服务器收到浏览器的请求，就会根据请求发送响应到浏览器，如果有数据的话就会携带着数据一起发送到服务器，即前后端的通信是在“请求——响应”中完成的
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报文格式
注意：GET请求是没有请求体的，数据是通过请求体携带的；POST请求有请求体的，数据是通过请求体携带的。
我们可以通过打开开发者工具查看
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状态码语义
我们可以通过开发者工具来查看每个响应的状态码
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
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);
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);
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
