526互联

Ajax-基础

发布时间 2023-12-13 22:37:19作者: 学Java的`Bei

 

 

1. 简介

　　Ajax（Asynchronous JavaScript and xml） 就是异步的JS和XML；

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

　　  广义：
　　同步：刷新页面
　　异步：刷新局部

　　一个请求仅有一个响应；

2. 优缺点　　

　　Ajax 的优点：
    •   可以无需刷新页面而与服务器端进行交互。
    •   允许根据用户事件来更新部分页面内容。
　　Ajax 的缺点：
    • 　没有历史记录
    • 　存在跨域问题 (同源策略，如从 a.com 发送请求到 b.com中)
    •     SEO 不友好 (搜索引擎的优化不友好)

 

3. HTTP协议

　　　　HTTP（hypertext transport protocol）：是基于TCP 的 超文本传输协议。

 

　　　　　 详细规定了浏览器和万维网服务器之间的互相通信的规则。

 

　　　　不支持服务端主动给客户端发送请求


　　　　① HTTP请求：
　　　　请求方法：动作：get、post；
　　　　　　get：查、获取；明文；通常用于从指定资源请求数据； 字符限制为 2083个字符；

          •   GET 请求可被缓存；

 

          •   GET 请求保留在浏览器历史记录中；

 

          •   GET 请求不应在处理敏感数据时使用；

 

          •   GET 请求有长度限制；

 

          •   GET 请求只应当用于取回数据；


　　　　　　post：增删改；密文；通常用于向指定的资源提交要被处理的数据；　　

          • 　POST 请求不会被缓存；
          • 　POST 请求不会保留在浏览器历史记录中 ，不会在 url 中显示所以是安全的；
          • 　POST 请求对数据长度没有要求；
          • 　POST 方法主要是向服务器提交数据 ，尤其是大批量的数据；

　　　　请求的url：地址

　　　　请求头：包含客户端环境信息，身份信息等。
　　　　请求体：请求正文包含客户提交的查询字符串信息，表单信息等。

 

　　　　② HTTP响应：

    •  数字和文字组成的状态码，用于显示请求的状态。(成功/失败)
    •  请求头（Response Headers） ：服务器类型，日期时间等...

　　　　　　　　　　    与

    •  响应头（Request Headers）：相应正文；

　　　　　都是私密的。


4. HTTP状态码

　　　　　(前端）100~199 表示连接成功；

 

　　　　　　　　 200~299 表示各种意义上的成功；

　　　　　　　　 300~399 表示重定向；

　　　　　　　　 400~499 表示客户端错误；

　　　　　　　　 500~599 表示服务端错误；

　　　　　　　　(出现状态码报错可直接按照状态码信息查询解决)

 

5. JQuery 中的 Ajax 与 JS中的Ajax

 

 

　　① JS 中的 Ajax：

      •  创建XMLHttpRequest( ) 对象
      •  连接（请求方法，请求地址：url，是否异步，默认异步（true））
      •  发送请求 send();
      •  成功！

　　　　　　　　0：未初始化，未调用open；
　　　　　　　　1：已初始化，未调用send；
　　　　　　　　2：已初始化，未调用send；
　　　　　　　　3：数据还在在传输中；
　　　　　　　　4：成功！

　代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>JS-Ajax</title>
 7 </head>
 8 <body>
 9     <!-- 包导入 -->
10     <script src="../jquery-1.8.3.min.js"></script>
11 
12     <script>
13         // JS的Ajax
14         // 1.新建XMLHttpRequest() 对象；
15         var lb  = new XMLHttpRequest();
16 
17         // 2.连接(请求方法：get/post 请求地址 url。默认异步)
18         lb.open("get","JS.txt");  // url地址放在同级目录里
19 
20         // 3. 发送请求send()；
21         lb.send();
22 
23         // 4. 成功！
24         lb.onreadystatechange = function(){
25             if(lb.readyState === 4 && lb.status === 200){
26                 console.log("成功！");
27             }else{
28                 console.log("失败！");
29             }
30         }
31             // 0：没初始化，没调用open
32             // 1: 初始化了，没调用send
33             // 2: 初始化了，调用send
34             // 3: 数据还在传输中。
35     </script>
36 </body>
37 </html>

 

 

　　　② JQuery 中的 Ajax：

      •  url：请求地址
      •  type：请求方法(get、post)
      •  date：请求参数（发送到服务器的数据（将自动转换为请求字符串格式））

　　　　　　　　发送到服务器的数据，格式是json格式或者json字符串格式。如果是GET 请求，系统就通过 url 传递；如果是 POST 请求，系统就通过设置请求体传递。

      •  success   请求成功执行的方法 / 请求失败执行的方法

 

　　　　　　　　　　该回调函数中的第一个参数是服务器返回的数据（拿到的只是数据），它会自动根据服务端响应的 Content-type 自动转换为对象，如果服务端没有设置响应头Content-type，返回的还是字符串类型的数据。

 

　　代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>JQuery-Ajax</title>
 7 </head>
 8 <body>
 9     <!-- 包引入 -->
10     <script src="../jquery-1.8.3.min.js"></script>
11 
12     <!-- JQuery中的Ajax -->
13     <script>
14         $.ajax({
15             // 1. 请求地址
16             url:"JQuery.json",
17             // 2. 请求方法
18             type:"get",
19             // 请求参数
20             date:{
21             
22             },
23             // 请求成功执行的方法
24             success:function(mes){
25                 console.log(mes);
26             },
27             // 请求失败执行的方法
28             error:function(mes){
29                 console.log("失败！");
30             }
31         })
32     </script>
33 </body>
34 </html>

 

　　视图：

　　console --> 反馈地址

　　  

　　Network --> 响应

 

　　　　　　　　　　

　　　　　　　　

 

 

6. TCP协议 三次握手 & 四次挥手

　　拓展：

　　　　FTP：（File Transfer Protocol） 文件传输协议

　　　　FIle 协议：访问本地文件

　　　　Webscoket：网络通信协议；主动给客户端发送协议

　　　　FTP：文件传输协议

　　重点：

　　　　面试重点：TCP、UDP协议区别
　　　　　　　　　UDP （User Datagram Protocol）是一种在计算机网络中广泛使用的传输层协议。一般用于游戏。

　　　　　　　　　　　特点：不可靠、无连接的数据服务。通俗讲，会主动给客户端发送协议。

　　　　　　　　　　　　TCP协议：可靠性，有连接。应用于要求较高的应用场景，如网页浏览、文件传输、电子邮件等。

　　　　　　　　　　　　　　提供了可靠的数据传输和流控制机制，能够确保数据的完整性和有序性。

　　　　　　　　　　　　　　由于TCP协议在传输过程中引入了较多的控制信息，因此相比于UDP协议，TCP的传输速度较慢。


　　TCP三次握手，四次挥手
　　三次握手：

　　

　　　　   TCP协议中，主动发起请求的一端称为『客户端』，被动连接的一端称为『服务端』。

　　　　不管是客户端还是服务端，TCP连接建立完后都能发送和接收数据。

　　　　刚开始的时候，服务器和客户端都为CLOSED状态。在通信开始前，双方都得创建各自的传输控制块（TCB）。

　　　　服务器创建完TCB后进入LISTEN状态，此时准备接收客户端发来的连接请求。

　　　　大白话情景演绎：我  VS  在看的你（帅哥/美女）

　　　　　　　　我：在吗？下午去吃烧烤...

　　　　　　　　你：好，有空！

　　　　　　　　我：下午告诉通知地点...

　　　　　　　　此时都约定好下午吃烧烤， 你 等待接收。

 

　　　　第一次握手：

　　　　　　客户端向服务端发送连接请求报文段。该报文段的头部中同步SYN=1，确认ACK=0，同时选择一个初始序号seq=x。请求发送后，客户端便进入SYN-SENT状态。

 

    • 　SYN=1，ACK=0表示该报文段为连接请求报文

    • 　x为本次TCP通信的字节流的初始序号

    • 　TCP规定：SYN=1的报文段不能有数据部分，但要消耗掉一个序号

　　　　第二次握手: 

　　　　　　服务端收到连接请求报文段后，如果同意连接，会发送一个应答：SYN=1，ACK=1，seq=y，ack=x+1。发送完应答后服务端进入SYN-RCVD状态。

    • 　SYN=1，ACK=1表示该报文段为连接同意的应答报文

    • 　seq=y表示服务端作为发送者时，发送字节流中的第一个字节序号

    • 　ack=x+1表示服务端希望客户端发送的下一个数据报初始序号是从x+1开始

 

　　　　第三次握手：

　　　　　　客户端收到服务端连接同意的应答后，会向服务端发送一个确认报文段；表示：服务端发来的连接同意应答已经成功收到。该报文段的头部为：ACK=1，seq=x+1，ack=y+1。

　　　　　客户端发完这个报文段后便进入ESTABLISHED状态，服务端收到这个应答后也进入ESTABLISHED状态，此时连接的建立完成！

　　　　为什么不可以是两次或者四次呢？

　　　　　用我的大白话讲讲。当两次握手时，服务端不知道客户端要与建立连接，而客户端一直在等待，会造成资源空耗。

　　　　　　　　　　　　　　若四次握手，三次握手通信正常，刚好建立连接，超过四次就会造成浪费。


　　四次挥手：保证数据传输完毕。

　　

 

 

 

　　第一次挥手：

　　　　　客户端数据发送完成，向服务端发送连接释放请求。该请求只有报文头，头中携带的主要参数为：FIN=1，seq=u。此时，客户端将进入FIN-WAIT-1状态。

　　　　TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。

 

    • 　FIN=1表示该报文段是一个连接释放请求。

    • 　seq=u，u-1是客户端向服务端发送的最后一个字节的序号。

　　第二次挥手：

　　　　　服务器收到客户端连接释放报文，通知相应的高层应用进程，告诉它客户端向服务器这个方向的连接已经释放了。

　　　　　 此时服务端进入了CLOSE-WAIT（关闭等待）状态，并向客户端发出连接释放的应答，其报文头包含：ACK=1，ack=u+1，并且带上自己的序列号seq=v。

　　　　 客户端收到该应答后，进入FIN-WAIT-2状态，等待服务器发送连接释放报文（在这之前还需要接受服务器发送的最后的数据）。

    • 　ACK=1：除TCP连接请求报文段以外，TCP通信过程中所有数据报的ACK都为1，表示应答。

    • 　seq=v，v是服务端释放应答报文段第一个字节序号。

    • 　ack=u+1表示希望收到从第u+1个字节开始的报文段，并且已经成功接收了前u个字节。

 

　　第三次挥手：

　　　　服务端将最后的数据发送完毕后，就向客户端发送连接释放报文，其报文头包含：FIN=1，ack=u+1，由于在CLOS-WAIT状态，服务端很可能又发送了一些数据，假定此时的序列号为seq=w。

　　　　此时，服务器就进入了LAST-ACK（最后确认）状态，等待客户端的确认。

　　第四次挥手：

　　　　   客户端收到服务器的连接释放报文后，向服务端发出确认应答，报文头：ACK=1，ack=w+1，而自己的序列号是seq=u+1，此时，客户端就进入了TIME-WAIT（时间等待）状态。

　　　　该状态会持续2MSL（最长报文段寿命）时间，这个期间TCP连接还未释放，若该时间段内没有服务端的重发请求的话，客户端就进入CLOSED状态，撤销TCB。服务端会比客户端结束的早。