网站首页 > 知识剖析 正文
并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担
一,AJAX有哪些有点和缺点?
优点:
1、最大的一点是页面无刷新,用户的体验非常好。
2、使用异步方式与服务器通信,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
缺点:
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
二,Ajax的实现流程是怎样的?
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
具体一点:
1,创建XNLHttpRequest对象
(不考虑ie)XMLHttpRequest request = new XMLHttprequest();
2,创建新的Http请求
XMLHttprequest.open(method,url,flag,name,password);
3,设置响应Http请求变化的函数
XMLHttprequest.onreadystatechange=getData;
function getData(){
if(XMLHttprequest.readyState==4){
获取数据
}
}
4,发送http请求
XMLHttprequest.send(data);
5,获取异步调用返回的对象
,function(data){
//异步提交后,交互成功,返回的data便是异步调用返回的对象,该对象是一个string类型的
}
6,使用js、DOM实现局部刷新
myDiv.innerHTML=''这是刷新后的数据''
三,AJAX应用和传统Web应用有什么不同?
在传统的Javascript编程中,如果想得到服务器端数据库或文件上的信息,或者发送客户端信息到服务器,需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息,然后等待服务器响应请求,页面重新加载。
因为服务器每次都会返回一个新的页面, 所以传统的web应用有可能很慢而且用户交互不友好。
使用AJAX技术, 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
通过HTTP Request, 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面),展示给用户的还是同一个页面,用户感觉页面刷新,也看不到Javascript后台进行的发送请求和接受,体验非常好。
- 上一篇: Fetch API 教程
- 下一篇: 浅谈前后端交互的基本原理
猜你喜欢
- 2025-05-24 前端面试:异步加载和延迟加载的理解?
- 2025-05-24 dart系列之:浏览器中的舞者,用dart发送HTTP请求
- 2025-05-24 Ajax异步JavaScript和XML
- 2025-05-24 编写个人的Ajax:感受前端异步世界的魅力
- 2025-05-24 SpringBoot 项目处理跨域的四种技巧
- 2025-05-24 前端——CORS跨域请求的限制与解决
- 2025-05-24 面试官:说说你对options请求的理解
- 2025-05-24 在B站看猫片被老板发现?不如按下F12学学HTTP
- 2025-05-24 Web性能的计算方式与优化方案(二)
- 2025-05-24 Spring Security在前后端分离项目中的使用
- 05-24前端面试:异步加载和延迟加载的理解?
- 05-24dart系列之:浏览器中的舞者,用dart发送HTTP请求
- 05-24Ajax异步JavaScript和XML
- 05-24编写个人的Ajax:感受前端异步世界的魅力
- 05-24SpringBoot 项目处理跨域的四种技巧
- 05-24前端——CORS跨域请求的限制与解决
- 05-24面试官:说说你对options请求的理解
- 05-24在B站看猫片被老板发现?不如按下F12学学HTTP
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)