Ajax的内部实现机制、原理与实践小结

网学网为广大网友收集整理了，Ajax的内部实现机制、原理与实践小结，希望对大家有所帮助！

一、Ajax是什么
AJAX全称为"Asynchronous JavaScript and XML"（异步JavaScript和XML），Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。作为创建交互式网页应用的网页开发技术，它有以下特点：
使用XHTML+CSS来表示信息
使用JavaScript操作DOM（Document Object Model）进行动态显示及交互
使用XML和XSLT进行数据交换及相关操作
使用XMLHttpRequest对象与Web服务器进行异步数据交换
使用JavaScript将所有的东西绑定在一起
使用SOAP以XML的格式来传送方法名和方法参数
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的"派生/合成"式（derivative/composite）的技术正在出现，如"AFLAX"。
AJAX的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式对象，也不支持XSLT。（摘自于：http://zh.wikipedia.org/zh-cn/AJAX）


二、Ajax诞生的背景，为什么使用Ajax
我们都知道，用户通过浏览器产生一个请求后，此请求通过HTTP协议，向服务器请求所要的资源，如果是一个图片链接，则请求的就是一个图片资源，如果是一个文件链接，则请求的是一个文件资源，多数情况下，请求的是整个网页，网页又根据自身的HTML代码，请求各个具体的资源，比如图片、音频等。随着网站的发展，用户量越来越大，服务器的压力也越来越大，这就暴露出了一个问题，即：大多数用户在请求资源时，新请求的那个网页中，与现在的那个网页有很多相同的地方。但是由于请求的是整个网页，它会重新从服务器获取所有的资源（当然，有很多图片、文件之类的会从客户端中获取），这就是大大的浪费。
为了解决这个问题，Ajax就诞生了，它主要的作用就是，通过XMLHttpRequest对象获取服务器资源，局部刷新用户正在浏览页面，大大减轻了服务器的压力，由于只获取的是需要更新的资源，相对整个页面的资源来说，浏览器也服务器之间的数据交互量也大大减少（大约只有原来的5%），大大加快了页面的加载速度。

三、Ajax发展史
该技术原属于微软的一个研发小组，为了允许客户端发送HTTP请求，研发出来的，但没有得到广泛应用。后经Google广泛用于它的应用程序进行异步通讯交互，如google讨论组、google地图等，Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速流传提高了人们使用该项技术的意识，后来就出现了疯狂的Ajax革命。

四、Ajax实践
AJAX 的要点是 XMLHttpRequest 对象，所有的实现也是通过XMLHttpRequest对象操作的。但是在浏览器大战的今天，不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
复制代码 代码如下:
// Mozilla, Safari,Opera 8.0+...
function ajaxFunction(){
var http_request;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持Ajax");
return false;
}
}
http_request.onreadystatechange = alertContents;
http_request.open(''GET'', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert