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

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

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

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 自动化测试平台_前后端交互之Ajax
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏