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

时间:2020-8-2 作者:admin


前后端交互之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进行封装,然后再发送到服务器,接着服务器以流的形式将数据返回给浏览器
自动化测试平台_前后端交互之Ajax
处理响应:

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定位的。
自动化测试平台_前后端交互之Ajax
js代码中:
自动化测试平台_前后端交互之Ajax
ajax请求方式中的各参数:
url:这个url就是请求接口的url:/api/add_event, 需要在urls.py文件中加入这个url对应的请求函数即path(‘api/add_event/’*, *views.add_event),同时需要在views.py文件中添加函数add_event()。如下图
自动化测试平台_前后端交互之Ajax
自动化测试平台_前后端交互之Ajax
type:请求方式
自动化测试平台_前后端交互之Ajax
dataType:设置接受到的响应数据的格式。自动化测试平台_前后端交互之Ajax
data:请求数据自动化测试平台_前后端交互之Ajax
success+function:如果请求成功,执行回调函数
自动化测试平台_前后端交互之Ajax
自动化测试平台_前后端交互之Ajax
error+function:如果请求失败,执行回调函数

add_event函数的响应
自动化测试平台_前后端交互之Ajax

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。