AJAX讲解

最新推荐文章于 2024-05-13 11:22:15 发布

大吖么大白菜

最新推荐文章于 2024-05-13 11:22:15 发布

阅读量323

点赞数 2

分类专栏： js 文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/weixin_45964083/article/details/121001950

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

AJAX

1.1 AJAX简介

AJAX就是异步的JS和XML
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
他不是新的变成语言，而是一种将现有的标准组合在一起使用的新方式

1.2 XML简介

XML可扩展标记语言
XML被设计用来传输和存储数据
他和HTML类似。但是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

例如： 有一个学生数据：name=“呵呵”；age=3;gender="男"；
用XML表示：

  <student>
      <name>呵呵</name>
      <age>3</age>
      <gender>男</gender>
  </student>

现在被JSON取代了：
{“name”:"呵呵","age"=3,"gender":"男"}

1.3 AJAX的特点

1.3.1 AJAX的优点

可以无需刷新页面而与服务器端进行通信
允许你根据用户事件（鼠标事件、键盘事件、表单事件。。）来更新部分页面内容

1.3.2 AJAX的缺点

没有浏览历史，不能回退
存在跨域问题（同源）【比如：从A网站向B网站发送AJAX请求，这是默认不允许的】
SEO不友好（搜索引擎优化）（爬虫爬不到数据）

2.HTTP

HTTP（超文本传输协议）是一个简单的请求-响应协议，它通常运行在TCP之上。

文本：html，字符串…
超文本：图片，音乐，视频，定位，地图…
80

Https：安全的

2.1两个时代

http/1.0：客户端可以与web服务器连接后，只能获得一个web资源，断开连接
http/1.1:客户端可以与web服务器连接后，可以获得多个web资源

2.2 Http请求

客户端–发请求（request）—服务器
百度：

Request URL: https://www.baidu.com/           请求地址
Request Method: GET                                 get方法/post方法
Status Code: 200 OK                                状态码：200
Remote Address: 220.181.38.150:443

Accept: text/html
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9     语言
Cache-Control: max-age=0
Connection: keep-alive

1.请求行

请求行中的请求方式：GET
请求方式：Get,Post,HEAD,DELETE,PUT,TRACT…
- get:请求能够携带的参数比较少，大小有限制，会在浏览器的URL地址栏现实数据内容，不安全，但高效
- post：请求能够携带的参数没有限制，大小没有限制，不会在浏览器的URL地址栏显示数据内容，安全，但不高效

2.消息头

Accept: 告诉浏览器，它所支持的数据类型
Accept-Encoding: 支持那种编码格式   GBK    UTF-8   GB2312  ISO8859-1
Accept-Language: 告诉浏览器，他的语言环境
Cache-Control: 缓存控制
Connection: 告诉浏览器，请求为你城市断开还是保持连接
HOST：主机。。

请求报文
重点是格式和参数

行         POST  /s?ie=utf-8     HTTP/1.1      
头         Host:  lol.com                 （注意这里的格式 都是名字+：+空格+内容）
             Cookie:  name=lianmeng
             Content-type:  application/x-www-form-urlencoded
             User-Agent:  chrome  83
空行
体         username=admin&password=admin  （如果是get，这里是空的，如果是post，这里可以不为空）

2.3Http响应

服务器—响应—客户端
百度：

Cache-Control: private               缓存控制
Connection: keep-alive                    链接
Content-Encoding: gzip                 编码
Content-Type: text/html            类型

1.响应体

Accept: 告诉浏览器，它所支持的数据类型
Accept-Encoding: 支持那种编码格式   GBK    UTF-8   GB2312  ISO8859-1
Accept-Language: 告诉浏览器，他的语言环境
Cache-Control: 缓存控制
Connection: 告诉浏览器，请求为你城市断开还是保持连接
HOST：主机。。
Refresh：告诉客户端，多久刷新一次
Location：让网页重新定位

2.响应状态码
200：请求响应成功
3xx：请求重定向

重定向：你重新到我给你的新位置去

4xx：找不到资源（如：404）

资源不存在

5xx：服务器代码错误（如：500，502（网关错误））

响应报文

行         HTTP/1.1   200  OK
头         Content-Type：  text/html；charset=utf-8
             Content-length：  2048
             Content-encoding：gzip
 空行
 体        <html>
                    <head>
                    </head>
                    <body>
                       <h1>呵呵</h1>
                    </body>
             </html>

我们平时在向服务端发送请求的时候，服务端给我们返回的结果就包含这四部分，HTML的内容会放在响应体当中，浏览器在接到结果之后，会把响应体结果提取出来，做一个解析，再进行渲染展示出来
在这里插入图片描述
Response Headers 里面有相应的行和头，Response里面是响应体
Request Headers 里面有请求行，头，Form Data里面是请求体
如果是get请求，有URL参数，Form Data这个位置就会变成Query String Parameters，他会对请求参数这里面做一个解析的显示。

3 jQuery Ajax 的使用

在这里插入图片描述
data：封装了服务器返回的数据
status：状态

ajax总结：

适用jQuery就导入jQuery，使用Vue就导入Vue

三部曲

编写对应处理的Controller，返回消息或者字符串或者json格式的数据
编写ajax请求
1. url：Controller请求，请求发送到的服务端地址
2. data：键值对
3. success：回调函数（success中的参数1.data 该参数封装了服务器返回的数据，status：状态）
给ajax绑定事件，点击.click，失去焦点onblur，键盘弹起keyup

1.Controller
在这里插入图片描述