网站地图
【www.gdgbn.com--网页配色】
关于ajax的实现方法与原理机制
ajax这个名字据说是asynchronous 网页特效 + xml的简写，实际上，它由下列几种技术组合而成。
1.使用css教程和xhtml来表示。
2. 使用dom模型来交互和动态显示。
3.使用xmlhttprequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
ajax的原理
xmlhttprequest是ajax的核心机制，它是在ie5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从xmlhttprequest讲起，来看看它的工作原理。
首先，我们先来看看xmlhttprequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responsetext 从服务器进程返回数据的字符串形式。
responsexml 从服务器进程返回的dom兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status text 伴随状态码的字符串信息
readystate 对象状态值，0—未初始化 1—正在加载 2—加载完毕 3—交互 4—完成。
但是，由于各浏览器之间存在差异，所以创建一个xmlhttprequest对象可能需要不同的方法。这个差异主要体现在ie和其它浏览器之间。
下面是面对不同浏览器分别创建的xmlhttprequest对象。
下面是面对不同浏览器分别创建的xmlhttprequest对象。
<script language="javascript" type="text/javascript">
var xmlhttp = false;
//创建面向ie的xmlhttprequest对象
try {
//使用msxml的一个版本来创建
xmlhttp = new activexobject("msxml2.xmlhttp");
} catch (e) {
try {
//使用它的另外一个对象来创建
xmlhttp = new activexobject("microsoft.xmlhttp");
} catch (e2) {
xmlhttp = false;
}
}if (!xmlhttp && typeof xmlhttprequest != "undefined") {
//创建面向其它非微软浏览器的xmlhttprequest对象
xmlhttp = new xmlhttprequest();
}
</script>
这个过程分为三步，首先我们定义一个xmlhttp来引用创建的xmlhttprequest。然后，我们尝试在微软的浏览器中创建该对象，先用msxml.xmlhttp对象来创建，如果失败再尝试用macrosoft.xmlhttp来创建它．最后，我们面向非微软浏览器来创建该对象．
这样，我们创建了一个xmlhttprequest对象，下面我们来看如何发出一个xmlhttprequest请求。 function
executexmlhttprequest(callback,url)
{
//处理非微软浏览器的情况
if(window.xmlhttprequest)
{
xhr=new xmlhttprequest();
xhr.onreadystatechange = callback;
xhr.open("get",url,true);
xhr.send(null);
}
//处理微软浏览器的情况
else if(window.activexobject)
{
xhr=new activexobject("macrosoft.xmlhttp");
if(xhr)
{
xhr.onreadystatechage=callback;
xhr.open("get",url,true);
xhr.send();
}
}
由上面可见，执行xmlhttprequest实际上大多数代码还是用在处理浏览器的区别上面，针对不同的浏览器它还是要做出不同的处理，但是这样看上去也非常的直观。
在上面的代码中，最关键的是：
xhr.onreadystatechage=callback 它定义了回调函数，一旦响应它就会自动执行。
xhr.open(""get",url,true); true表示您想要异步执行该请求。对于callback来说，我们有：
function processajaxresponse() {
//状态标识为已完成
if (xhr.readystate == 4) {
//已就绪
if (xhr.status == 200) {
502 502"votes").innerhtml = xhr.responsetext;
} else {
alert("there was a problem retrieving the xml data:
" +
xhr.statustext);
}
}
}
就是说，一旦服务器处理完xmlhttprequest并返回给浏览器，用xhr.onreadystatechange指派的回调方法将自动调用。
上面差不多就是xmlhttprequest的整个工作流程，它首先检查xmlhttprequest的整体状态并且保证它已经完成（readystatus=4），然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。