Ajax的原理和运行机制
关于ajax,是最近炒得非常火的一种技术,并且时下它也是非常流行。当然,它并不是什么新技术,而是在各种已有的技术和支持机制下的一个统一。在我的项目中,偶尔也会用到ajax,用来给用户一些无刷新的体验。用过几次之后,我个人决定对它的原理和运行机制做一个总结。 1.使用CSS和XHTML来表示。 ajax的原理
<
scriptlanguage
=
"
javascript
"
type
=
"
text/javascript
"
>
var xmlHttp = false ; // 创建面向IE的XMLHttpRequest对象 try { 使用Msxml的一个版本来创建 xmlHttp = new ActiveXObject( " Msxml2.XMLHTTP " ); } catch (e){ 使用它的另外一个对象来创建 new ActiveXObject( " Microsoft.XMLHTTP " ); } catch (e2){ xmlHttp = false ; } } if ( ! xmlHttp && typeof XMLHttpRequest != ' undefined ' ){ 创建面向其它非微软浏览器的XMLHttpRequest对象 new XMLHttpRequest(); } < / script>
这个过程分为三步,首先我们定义一个xmlHttp来引用创建的XMLHttpRequest。然后,我们尝试在微软的浏览器中创建该对象,先用Msxml.XMLHTTP对象来创建,如果失败再尝试用macrosoft.XMLHTTP来创建它.最后,我们面向非微软浏览器来创建该对象.
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 " ,255)">true ); xhr.send(); } } }
由上面可见,执行XMLHttpRequest实际上大多数代码还是用在处理浏览器的区别上面,针对不同的浏览器它还是要做出不同的处理,但是这样看上去也非常的直观。 对于callback来说,我们有:
function
processAjaxResponse(){
状态标识为已完成 if (xhr.readyState == 4 ){ 已就绪 if (xhr.status == 200 ){ document.getElementById( ' votes ' ).innerHTML = xhr.responseText; } else { alert( " TherewasaproblemretrievingtheXMLdata: " + xhr.statusText); } } }
就是说,一旦服务器处理完XMLHttpRequest并返回给浏览器,用xhr.onreadystatechange指派的回调方法将自动调用。 上面差不多就是XMLHttpRequest的整个工作流程,它首先检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),然后根据服务器的设定询问请求状态,如果一切已经就绪(status=200),那么就执行下面需要的操作。 知道了XMLHttpRequest的工作流程,我们可以看出,XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。 本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/jianzi1943/archive/2007/07/12/1686340.aspx (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |