【前端大杂烩】✨✨一文带你走进ajax的世界✨✨

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

大家好? ，欢迎来到薇z的前端世界

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

?? ajax全称为Asynchronoous javascript xm,那么它的最大特点就是在网页不刷新的状态下向服务端发送http请求，然后得到http响应，ajax在平常网页中随处可见，比如一些关键字的提醒，或者是百度的注册页面检测用户名是否可用以及京东商品分类鼠标悬浮可以得到一些商品的大致内容等等，原理都是ajax。ajax可以提高用户体验，用户不需要刷新，不需要跳转就可以看到更多的内容，目前，很多app和服务器之间的通信都采用了ajax技术，因此，ajax技术也成为了前端工程师的必备技能，下面这一篇文章是我学习的总结?，让我们一起学习吧~

文章目录

【前端大杂烩】✨✨一文带你走进ajax的世界✨✨

1. 原生的AJAX

1.1 ajax的介绍

ajax全称为Asynchronoous javascript xml ，就是异步的js和xml。

通过ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2 xml 简介

xml 可扩展标记语言

xml被设计用来传输和存储数据。

xml 和html 类似，不同的是html 中都是预定义标签，而xml中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说有一个学生的数据：

name="孙悟空";age=18;gender="男";

用xml表示：

<student>

	<name>孙悟空</name>

	<age>18</age>

	<gender>男</gender>

</student>

现在已经被json取代了

用json表示：

{"name":"孙悟空","age":"18","gender":"男"}

1.3 ajax的特点

1.3.1优点

①可以无需刷新页面与服务器进行通信

②允许根据用户事件来更新部分页面内容

1.3.2 缺点

①没有浏览历史，不能回退

②存在跨域问题（例如a.com向b.com发送请求是请求不到的）

③SEO不友好

2.HTTP

超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

①请求报文

重点是格式与参数

…

行  POST/s?ie=utf-8/HTTP/1.1

头  Host：atguigu.com

	Cookie:name=guigu

	Content-type:application/x-ww-form-urlencoded

	User-Agent:chrome 83

空行

体	username=admin&password=admin

…

②响应报文

行	HTTP/1.1  200  OK

(404 找不到 403 没有权，禁止 401 未授权 500内部错误 200 OK)

头	Content-Type:text/html;charset=utf-8

	Content-length:2048

	Content-encoding:gzip

空行

体

<html>

	<head>

	<body>

		<h1>尚硅谷</h1>

	</body>

	</head>

</html>

3. nodejs安装

①去官网nodejs.cn下载相关应用软件，按照步骤下载安装。

win+r输入cmd，输入命令 node -v

如果出现类似 v14.50类似版本的，就是安装成功。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NknhJywk-1658026213220)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps1.jpg)]$

②打开vscode在侧边－>右键->在集成终端中打开

在终端输入 npm init --yes进行初始化

③安装express框架

终端输入命令 npm i express

编写代码：

//1. 引入express

const express=require('express');

//2. 创建应用对象

const app=express();

//3. 创建路由规则

//request是对请求报文的封装

//response是对响应报文的封装

	app.get('/',(request,response)=>{

	response.send('hello,express');

});
//4. 监听端口启动服务

app.listen(8000,()=>{

console.log("服务已启动，8000 端口监听中.....");

})

然后去浏览器输入 127.0.0.1：8000 可以看到响应的内容

按f12可以通过查看headers respons窗口可看到请求报文和响应报文的相关内容。

该窗口启动后，该端口会显示已被占用，若还需要用该端口，这需要按ctrl+c关闭该端口

4.ajax案例准备

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CFAiTlwY-1658026213222)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps2.jpg)]$
在这里插入图片描述

在浏览器中输入：http://127.0.0.1:8080/server 可看到输出 hello ,ajax

ajax发送get请求操作script

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ip4rAMty-1658026213222)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps3.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Knb2omwf-1658026213223)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps4.jpg)]$

理解：在html语言中，有两种方式给服务器发送表单（你在网页中填写的一些数据）。一种是post一种是get。Post把表单打包后隐藏在后台发送给服务器，get把表单打包发送前，附加到url（网址）的后面。Post的安全性比get的安全性高。

5.ajax发送post请求操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3Uc9JRG-1658026213223)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps5.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yH6DXXnh-1658026213224)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps6.jpg)]$

注意：在更改了server.js内容时，要关闭原先的端口，重新启动端口

6. ajax设置请求头信息

Post.html里的

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MS4PyaM5-1658026213225)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps7.jpg)]$

Server.js里的

all：可以接受任何类型的请求

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TyXGoKG0-1658026213226)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps8.jpg)]$

7.服务端响应JSON数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3rYq4iSk-1658026213227)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps9.jpg)]$

Server.js

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OByB05vv-1658026213227)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps10.jpg)]$
在这里插入图片描述

8. 安装自动重启工具nodemon

在官网npmjs.com可以看到该工具的相关介绍

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-505mVIPl-1658026213228)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps12.jpg)]$

在终端输入命令 npm install -g nodemon 就可以安装该工具

重新启动服务器输入命令 npx nodemon server.js 按tab键自动补齐路径，回车。

在此之后，server.js的任何更改，都会自动重启。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EaoEqfuW-1658026213228)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps13.jpg)]$

9. IE缓存问题

IE浏览器不能实时更新缓存，将Ajax的结果保存到本地缓存，

再次向服务器发出请求时，结果是从本地缓存里拿

解决：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rZxdbeEO-1658026213229)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps14.jpg)]$

在这里插入图片描述

10. 超时与网络异常

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R1aD1V38-1658026213229)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps15.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FNSnsjao-1658026213230)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps16.jpg)]$

11.ajax取消请求操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r7O7c18l-1658026213230)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps17.jpg)]$

12.ajax重复发送请求问题

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xO1MHjRn-1658026213231)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps18.jpg)]$

13.jQuery发送ajax请求

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9H0tZWgE-1658026213231)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps19.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HeaUXiF7-1658026213232)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps20.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NCwO00kg-1658026213232)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps21.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uBqpZLCB-1658026213232)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps22.jpg)]$

14.axios发送ajax请求

axios插件可以到axios官网中查找，引用插件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r40vy3nb-1658026213233)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps23.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BEbtyJ9H-1658026213233)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps24.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qwG6dp8o-1658026213234)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps25.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0ELn2uF-1658026213234)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps26.jpg)]$

更多的axios使用查看官方axios文档

15.同源策略

1.同源策略最早由Netscape公司提出的，是浏览器的一种安全策略。

同源：协议，域名，端口号，必须完全相同。

违背同源策略就是跨域

ajax是遵循同源策略的

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KgpWE90l-1658026213235)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps27.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkazy5Y5-1658026213235)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps28.jpg)]$

16.JSONP

1.1 jsonp是一个非官方的跨域解决方案，存粹凭借程序员的聪明开发出来的，只支持get请求.

1.2 在网页有一些标签天生具有跨域能力，比如：img link iframe script

1.3 jsonp就是利用script标签的跨域能力来发送请求。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hzeovbp1-1658026213236)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps29.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yz7pSw9O-1658026213236)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps30.jpg)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KLexxhav-1658026213237)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps31.jpg)]$

jsonp的案例

在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nYqDmWM3-1658026213238)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps33.jpg)]$

17.cors跨域请求

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cQGxLbXv-1658026213238)(file:///C:\Users\Acer\AppData\Local\Temp\ksohtml12240\wps34.jpg)]$

1.cors官网

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access control CORS

2.cors是什么？

跨域资源共享，cors是官方跨域解决方案，他的特点是不需要再客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准新增了一组http首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

3.cors怎么工作

cors是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应就会对响应放行。

本文含有隐藏内容，请开通VIP 后查看

【前端大杂烩】一文带你走进ajax的世界