4.AJAX之状态值+状态码+HTTP请求

曾经终败给现在 2023-06-13 09:30 8阅读 0赞

# AJAX之状态值+状态码+HTTP请求 #

# HTTP请求 #

**HTTP简介**  
http是计算机通过网络进行通信的规则，使浏览器去服务器请求信息和服务。  
HTTP是一种无状态协议（他可以自己保存东西cookie）：无状态指的是不建立持久的连接，即服务端不保留连接的相关信息，即断开请求和响应后是没有记忆的  
![在这里插入图片描述][20191115152813266.png]

**HTTP请求是一步完成的吗？—NO  
HTTP请求步骤  
一个完整的HTTP请求过程，通常包含以下7个步骤  
（1）建立TCP连接  
（2）WEB浏览器向WEB服务器发送请求命名  
（3）WEB浏览器发送请求头信息  
（4）WEB服务器应答  
（5）WEB服务器发送应答头信息  
（6）WEB服务器向浏览器发送数据  
（7）WEB服务器关闭TCP连接**

### HTTP请求组成部分---->一个HTTP请求一般由4部分组成 ###

**（1）HTTP请求的方法或动作，比如get或post请求  
（2）请求的URL地址-----网址  
（3）请求头，包含客户端环境信息，身份验证信息等  
（4）请求体即请求正文，请求正文可以包含客户提交的查询字符串信息，表单信息等。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
HTTP请求方法  
（1）get方法：一般用于信息获取、使用URL传递参数、对发送的信息数量有所限制，常用于查询，数据可见，一般在2000个字符（默认的HTTP请求方法）。  
优势：因为数据通过URL传递，所以可以将其存放在书签里。  
注意：get方法也叫幂等，即查询结果不受查询次数影响，例如查询一个员工信息1次和1000次，并不会随着查询次数的叠加而有所改变。  
（2）post方法：一般用于修改服务器上的资源，常用于新建和修改数据等操作，数据不可见，被嵌入了HTTP请求体里，且对所发送信息的数量无限制。  
（3）区别：常用get方法做查询和获取操作，post方法做发送数据、新建修改数据等操作。

# HTTP响应 #

HTTP 响应组成部分----->一个HTTP响应一般由3部分组成  
（1）响应状态：一个数字和文字组成的状态码，用来显示请求是否成功；  
（2）响应头：响应头和请求头一样，包含许多有用的信息（注意是服务器的信息），例如服务器类型、日期时间、内容类型和长度等。  
（3）响应体：响应正文，即服务器传过来的字符串、代码等。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
HTTP 响应状态码  
HTTP状态码（英语：HTTP Status Code）是用以表示网页服务器超文本传输协议响应状态的3位数字代码  
HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型

#### 主要包含以下几种 ####

（1）1XX：信息类，表示收到web浏览器请求，（告诉客户端已经收到了请求）正在进一步处理中。  
（2）2XX：成功，表示用户请求被正确接收、理解和处理，例如200 OK。200–表示已经完成请求  
（3）3XX：重定向，表示请求没有成功，客户需要采取进一步处理。  
（4）4XX：客户端错误，表示客户提交的请求有错误，例如：404 NOT Found，意为请求中所引用的文档不存在（地址错误）。—404：表示文档/资源不存在  
（5）5XX：服务器错误，表示服务器不能完成对请求的处理，如500。  
熟悉以上状态码，有助于开发调节的效率和准确性。

# AJAX状态值&&状态码 #

1、AJAX状态值  
ajax的状态值：运行ajax时，无论是成功还是失败都要响应的步骤的几种状态。例如：尚未调用send()方法时的初始化前、正在发送请求、正在响应等，由ajax对象和服务器之间的交互所得。通过ajax.readyState获得 0~4 范围的一个状态值。  
即readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成

2、AJAX状态码  
ajax状态码是值，ajax无论请求是否成功，由HTTP协议根据所提交的信息，服务器返回的http头信息代码，通过ajax.state属性来获得。

# AJAX状态值 #

AJAX状态值：  
ajax的 XMLHttpRequest 不是一次就完成的，而是经历过多种状态后获取的结果。这些状态分为5种：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

# AJAX状态码 #

在HTTP1.1协议下，HTTP状态码总共可分为5大类：  
![在这里插入图片描述][20191115153749884.png]

状态码详细说明：  
1xx：收到请求，继续处理

![在这里插入图片描述][20191115153757126.png]

2xx：操作成功收到，分析、接受  
![在这里插入图片描述][20191115153802684.png]

3xx：完成此请求必须进一步处理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

4xx：请求包含一个错误无法或不能完成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]  
5xx：服务器执行一个完全有效请求失败  
![在这里插入图片描述][20191115153856565.png]

# 面试：AJAX状态码&&状态值 #

**AJAX面试题1：为什么 onreadystatechange 函数的执行要同时判断 readyState 和 status ?**

**答案：**  
1、假设只判断 readyState  
服务响应出错了，但还是返回了信息。此时由于只做 readyState 判断，它不理会 status 返回的结果是200、404还是500，只要响应成功返回了，就执行接下来的javascript代码，结果会造成各种不可预料的错误，所以只判断 readyState 是不对的~

2、假设只判断 status  
服务响应的状态码为200，onreadystatechange函数总共执行了三次（可以使用ajax请求代码自行检验），就是说onreadystatechange函数的执行不是只在readyState变为4的时候触发，而是readyState（2、3、4）的每次变化都会触发，由此可见单独判断 status 也是行不通的

AJAX面试题2：判断 readyState 和 status 的顺序有先后之分吗?

答案：  
结合之前得出结论，判断 onreadystatechange 函数的执行 readyState 和 status 缺一不可。由试验可知，readyState 的每次变化都会触发 onreadystatechange 函数，若是先判断 status，那么每次都会多判断一次 status。两者的判断先后顺序不会影响结果，但相对而言，优先判断 readyState 可以对性能有微许的优化。**xhr.readyState === 4 && xhr.status === 200**

所以先判断readyState 状态值比较好。

# 如有问题或者疑问请留言联系小编！！！ #

# 感谢来访！！！ #

[20191115152813266.png]: https://img-blog.csdnimg.cn/20191115152813266.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115153537821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191115153651850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191115153737344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115153749884.png]: https://img-blog.csdnimg.cn/20191115153749884.png
[20191115153757126.png]: https://img-blog.csdnimg.cn/20191115153757126.png
[20191115153802684.png]: https://img-blog.csdnimg.cn/20191115153802684.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191115153827903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191115153841529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191115153856565.png]: https://img-blog.csdnimg.cn/20191115153856565.png