Ajax 的原理及优缺点(代码)
Ajax的原理图
1什么是Ajax?
Ajax全称为“Asynchronous javaScript and xml”(异步javaScript and xml),是一种创建交互式网页应用的网页开发技术。
是基于web标准XHTML+CSS的表示;
使用DOM进行动态显示及交互;
使用XMLHttpRequest进行异步数据查询,检索;
使用javaScript将所有的东西绑定在一起;
本质上是一个浏览器端的技术。
2. 谈谈 Ajax 原理
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求,从服 务器获得数据,然后用 javascript 来操作 DOM 而更 新页面的局部显示。
3 Ajax 的优点:
1.最大的一点是页面无刷新,给用户的体验非常好,通过异步模式,提升了用户体验
2.优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用。
使用异步方式与服务器通信,不需要打断用户操作,具有更加迅速的响应能 力。
3.ajax 的原则是“按需取数据”,最大程度的减少冗余请求,减少服务器的负荷。
?现在几乎所有的B/S软件项目都会增加Ajax,从而提高用户体验度
4Ajax 的缺点:
1.破坏浏览器后退按钮的正常行为。在动态更新页面后,用户无法回到前一个 页面的状态.
2.使用 JavaScript 作 Ajax 的引擎, JavaScript 的兼容性和 Debug 本身就让人 头大。
5Ajax 的应用场景:
1.文本输入提示(自动完成)的场景(注册)
2.对数据进行联动过滤的场景(三级联动)
创建ajax程序的基本流程(1.html)
1. 创建XMLHttpRequest对象
var request;
if (window.XMLHttpRequest) { // Mozilla,...
request = new XMLHttpRequest();
}else if (window.ActiveXObject) { // IE
request = new ActiveXObject(“Msxml2.XMLHTTP”);
}
2. 使用XMLHttpRequest对象创建请求
request.open("get", “testAjaxServlet" );
3. 监视response的状态,写回调函数处理服务器返回的数据
request.onreadystatechange = function(){
if(request.readyState==4){
var result = request.responseText; //得到服务器端返回的数据
document.getElementById(“div2”).innerHTML=result; //局部刷新
}
};
4. 使用XMLHttpRequest对象发送请求
request.send(null); //如果不写null,火狐会报错。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。