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

前后端交互之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进行封装，然后再发送到服务器，接着服务器以流的形式将数据返回给浏览器

处理响应：

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

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

Jquery实现方式

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

html中：

html代码：每个input标签都要有id值，因为ajax是通过id定位的。

js代码中：

ajax请求方式中的各参数：
url：这个url就是请求接口的url:/api/add_event, 需要在urls.py文件中加入这个url对应的请求函数即path(‘api/add_event/’*, *views.add_event)，同时需要在views.py文件中添加函数add_event()。如下图


type：请求方式

dataType：设置接受到的响应数据的格式。
data：请求数据
success+function：如果请求成功，执行回调函数


error+function：如果请求失败，执行回调函数

add_event函数的响应