当前位置： 移动技术网 > IT编程>脚本编程>Ajax > Ajax的内部实现机制、原理与实践小结

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

一、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('there was a problem with the request.');
}
}
}

解释：首先创建一个xmlhttprequest对象http_request，如果支持window.xmlhttprequest，则用new xmlhttprequest() 来创建此对象。这条语句针对 firefox、opera 以及 safari 浏览器，如果不支持，则尝试针对internet explorer 6.0+ 的msxml2.xmlhttp组件创建xmlhttprequest，如果也不支持，则尝试针对 internet explorer 5.5+ 的microsoft.xmlhttp组件，如果仍然不支持，则说明用户的浏览器版本太低了，提示用户“您的浏览器不支持ajax”。
xmlhttprequest对象的onreadystatechange方法用于，状态改变时要执行的方法，用来处理这个响应。
readystate的状态是：
　　0 请求未初始化（open() 之前）
　　1 请求已提出，正在装载 （调用 send() 之前）
　　2 装载完毕，请求已发送（这里通常可以从响应得到内容头部）
　　3 交互中，请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
　　4 请求已完成（可以访问服务器响应并使用它）
所以当readystate等于4时，就表示一个完整的服务器响应已经收到了，接着，函数会检查http服务器响应的状态值。当http服务器响应的值为200时，表示状态正常。这时候才真正执行客户端要执行的操作。
读取从服务器返回过来的数据，有两种方式：
　　1、http_request.responsetext：以文本字符串的方式返回服务器的响应
　　2、http_request.responsexml：以xmldocument对象方式返回响应

五、ajax缺陷与不足
1、可能破坏浏览器后退按钮的正常行为；
2、使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中；
3、ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等；
4、一些手持设备（如手机、pda等）现在还不能很好的支持ajax。

六、ajax工具

1、 开源js框架，写得更少，做得更多；
2、 微软ajax工具箱；
3、 一个自yui延伸出来的ajax框架。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网