自动化测试平台_前后端交互之Ajax

向右看齐 2021-09-24 13:52 356阅读 0赞

## 前后端交互之Ajax ##

The Jquery library has a full suite of Ajax capabilities.The functions and methods there in allow us to load data from the server without a browser page fresh.

**传统方式**：用户触发一个HTTP请求到 Web服务器，服务器接收并处理传来的数据，然后回送一个新的页面

*  分析1：这种方式浪费了很多资源和带宽，很多情况下，返回的页面大部分HTML代码是一致的
 *  分析2：客户在服务器处理请求期间，只能等待，不能进行操作

**AJAX方式**：AJAX可以只向服务器发送请求，并且取回必要的数据，客户端采用 JavaScript 的方式处理来自服务器的回应

*  分析1：大大的减少了数据量，服务器回应速度更快，部分处理转移到了客户端，减轻了服务器的负荷
 *  分析2：可以实现客户端和服务器的异步通讯方式

**异步**和**同步**是基于客户端和服务器端相互通信的基础上

*  同步：客户端必须的等待服务器端给予的响应，在此期间不能进行其他操作
 *  异步：与同步不同，客户端不需要等待服务器响应，在此期间可以进行任何操作

*XMLHttpRequest基本原理：*

Ajax中最大的特点 就是请求会*被异步对象XMLHttpRequest进行封装*，然后再*发送到服务器*，接着服务器以*流的形式*将数据返回给浏览器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70]  
处理响应：

xhr.onreadystatechange=function() { 
    //判断readyState就绪状态是否为4，判断status响应状态码是否为200
    if (xhr.readyState==4 && xhr.status==200) { 
        //获取服务器的响应结果
        var responseText = xhr.responseText;
        alert(responseText);
        }
    }

<table> 
 <thead> 
  <tr> 
   <th>状态</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>readyState = 0</td> 
   <td>请求未初始化：在创建XMLHttpRequest对象之后，但在调用open（）方法之前</td> 
  </tr> 
  <tr> 
   <td>readyState = 1</td> 
   <td>请求已建立：在调用open（）方法之后但在调用send（）之前</td> 
  </tr> 
  <tr> 
   <td>readyState = 2</td> 
   <td>请求已发送：调用send（）之后</td> 
  </tr> 
  <tr> 
   <td>readyState = 3</td> 
   <td>请求正在处理中：浏览器与服务器建立通信之后，但服务器未完成响应之前</td> 
  </tr> 
  <tr> 
   <td>readyState = 4</td> 
   <td>请求已完成：请求完成后，并且已从服务器完全接收到响应数据</td> 
  </tr> 
 </tbody> 
</table>

**Jquery实现方式**

使用原生的 JavaScript 实现 AJAX 确实比较麻烦，而 使用 Jquery 也可以帮助我们实现这样一种需求，而且也会让我们的代码更加简洁，直观。

**html中：**

html代码：每个input标签都要有id值，因为ajax是通过id定位的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 1]  
js代码中：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 2]  
ajax请求方式中的各参数：  
url：这个url就是请求接口的url:/api/add\_event, 需要在urls.py文件中加入这个url对应的请求函数即path(‘api/add\_event/’\*, \*views.add\_event)，同时需要在views.py文件中添加函数add\_event()。如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20200731164803872.png]  
type：请求方式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 4]  
dataType：设置接受到的响应数据的格式。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 5]  
data：请求数据![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 6]  
success+function：如果请求成功，执行回调函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 8]  
error+function：如果请求失败，执行回调函数

add\_event函数的响应  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70]: /images/20210923/4f9d64e7a28e4ec795d7615521fe6593.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 1]: /images/20210923/e82397172bd34386b17f3d731d6befb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 2]: /images/20210923/92ebb5e74e264a46b045e6deff1a2757.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 3]: /images/20210923/2eae0530fe1446a4b4b44ef2a811f023.png
[20200731164803872.png]: /images/20210923/111952d505904a4a938be93d12ca37e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 4]: /images/20210923/19a87cf03d4249828c87909d1dfb3235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 5]: /images/20210923/8e89bea5ffcb4d0bbdbdc8a0c082fa12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 6]: /images/20210923/b4ecb8a46d3c46c09a98d4a3a9664cdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 7]: /images/20210923/d317f7103b8d4386b4d4f1cf47fcb52f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 8]: /images/20210923/3f4f45e02c594019bf748549bd12544f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 9]: /images/20210923/9dbcfed59df54ed7a351e19ff3906d4c.png