Ajax技术原理小结

ajax：Asynchronous Javascript and XML 异步Javascript 和XML。

是一种创建交互式网页应用的网页开发技术。

1.0 优势：

1.1 通过异步模式，提升了用户体验。

1.2 优化了浏览器与服务器之间的传输，减少了不必要的数据往返，减少了带宽占用。

1.3 Ajax引擎在客户端运行，承担了一部分本来由服务器承担的共组，从而减少了大用户量下的服务器负载。

2.0 工作原理

Ajax核心是 Javascript对象XmlHttpRequest。该对象在 IE5中首次引用，它是一种支持异步请求的技术。XmlHttpRequest使您可以使用Javascript向服务器提出请求并处理响应，而不是阻塞用户，达到无刷新的效果。

由于浏览器之间存在差异，创建XmlHttpRequest对象的方式也有差异（主要是IE和其他浏览器之间的差异）。

　　2.1 比较通用型的创建异步请求的方法:

function CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象的方法
if (window.XmlHttpRequest) { xmlhttp = new XmlHttpRequest(); } //IE浏览器创建XmlHttpRequest对象的方法 if (window.ActiveXObject) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("msxml2.XMLHTTP"); } catch (ex) { } } } }

　　2.2 XmlHttpRequest相关属性：

　　　　onreadystatechange 每次状态改变所触发事件的事件处理程序。

　　　　responseText 从服务器进程返回数据的字符串形式。

　　　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。

　　　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

　　　　status Text 伴随状态码的字符串信息

　　　　readyState 对象状态值

　　　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　　　　1 (初始化) 对象已建立，尚未调用send方法

　　　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

　　2.3 简单的Demo示例：

function SendAsyncRequest() {
var data = document.getElementById("XXId").value; CreateXmlHttp(); //创建XmlHttpRequest对象 if (!xmlhttp) { //判断对象是否创建成功 alert("创建xmlhttp对象异常！"); return false; } xmlhttp.open("POST", url, false); //开始发送异步请求 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText; //数据接收完毕  } } xmlhttp.send(); }

3.0 缺点：

1.破坏了浏览器后退按钮的正常行为，动态更新页面后，无法回到前一个页面的状态。

2.使用Javascript作为Ajax的基础引擎，Javascript的兼容性并不是很好。（当然现在流行的Jquery等javascript类库大大改善了这些问题,对Ajax的调用也方便了很多，本文只是简述了Ajax的基本实现原理）。

转载于:https://www.cnblogs.com/yexinw/p/4165438.html

Ajax技术原理小结相关推荐

ajax技术原理 F7300178 qrx
ajax技术原理 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是指一种创建交互式 ...
ajax技术原理及工作原理
AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 主要包含了以下几种 ...
Ajax学习总结（1）——Ajax实例讲解与技术原理
摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用 ...
ajax技术的实质是什么意思,什么是Ajax？Ajax的原理是什么？Ajax的核心技术是什么？Ajax的优缺点是什么？...
Ajax是一种无需重新加载整个网页,能够更新部分网页的技术.Asynchronous JavaScript and XML的缩写,是JavaScript.XML.CSS.DOM等多个技术的组合. Aj ...
Ajax实例讲解与技术原理
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:AJAX即"Asynchronous Javascript And XML&q ...
IM的扫码登录功能如何实现？一文搞懂主流的扫码登录技术原理
本文引用了3位作者"精品唯居"." Yangfan2016"." MrYun"的部分文章内容,一并感谢. 1.引言扫码登录这个功能,最早 ...
J2EE开发技术点4：ajax技术
前言 AJAX 是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术.需要知道的是,Ajax技术并不是一项新的技术,而是使用现有技术解决问题的新方法.Ajax(Asynchronous ...
一文搞懂主流的扫码登录技术原理(附源码)
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] 1.引言扫码登录这个功能,最早应该是微信的PC端开始搞,虽然有点反人类的功能(不扫码也没别的方式登录),但不得不说还是很酷的. 下面这张 ...
ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数
ajax通讯原理要解释ajax的原理,需要从旧的交互方式开始,当用户触发一个http请求到服务器,服务器对其进行处理之后,再返回一个新的html页到客户端,每当服务器处理客户端提交的请求时,客户都只 ...

Ajax技术原理小结

Ajax技术原理小结相关推荐

最新文章

热门文章