Ajax的原理和运行机制【美高梅59599】

Ajax的原理和运行机制【美高梅59599】

 关于ajax,是最近炒得非常火的一种技术,并且时下它也是非常流行。当然,它并不是什么新技术,而是在各种已有的技术和支持机制下的一个统一。在我的项目中,偶尔也会用到ajax,用来给用户一些无刷新的体验。用过几次之后,我个人决定对它的原理和运行机制做一个总结。
    ajax这个名字据说是Asynchronous JavaScript +
XML的简写,实际上,它由下列几种技术组合而成。

关于ajax,是最近炒得非常火的一种技术,并且时下它也是非常流行。当然,它并不是什么新技术,而是在各种已有的技术和支持机制下的一个统一。在我的项目中,偶尔也会用到ajax,用来给用户一些无刷新的体验。用过几次之后,我个人决定对它的原理和运行机制做一个总结。
    ajax这个名字据说是Asynchronous JavaScript +
XML的简写,实际上,它由下列几种技术组合而成。

   1.使用CSS和XHTML来表示。
   2. 使用DOM模型来交互和动态显示。
   3.使用XMLHttpRequest来和服务器进行异步通信。
   4.使用javascript来绑定和调用。

   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对象。

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对象。

美高梅59599 1<script language=”javascript” type=”text/javascript”>
美高梅59599 2var xmlHttp = false;
美高梅59599 3//创建面向IE的XMLHttpRequest对象
美高梅59599 4美高梅59599 5try 美高梅59599 6{
美高梅59599 7//使用Msxml的一个版本来创建
美高梅59599 8xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
美高梅59599 9美高梅59599 10} catch (e) 美高梅59599 11{
美高梅59599 12美高梅59599 13try 美高梅59599 14{
美高梅59599 15//使用它的另外一个对象来创建
美高梅59599 16xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
美高梅59599 17美高梅59599 18} catch (e2) 美高梅59599 19{
美高梅59599 20xmlHttp = false;
美高梅59599 21}
美高梅59599 22}
美高梅59599 23
美高梅59599 24美高梅59599 25if (!xmlHttp && typeof XMLHttpRequest != ‘undefined’) 美高梅59599 26{
美高梅59599 27//创建面向其它非微软浏览器的XMLHttpRequest对象
美高梅59599 28xmlHttp = new XMLHttpRequest();
美高梅59599 29}
美高梅59599 30</script>
美高梅59599 31

 

这个过程分为三步,首先我们定义一个xmlHttp来引用创建的XMLHttpRequest。然后,我们尝试在微软的浏览器中创建该对象,先用Msxml.XMLHTTP对象来创建,如果失败再尝试用macrosoft.XMLHTTP来创建它.最后,我们面向非微软浏览器来创建该对象.
 这样,我们创建了一个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;
    }
  }

美高梅59599 32function executeXMLHttpRequest(callback,url)
美高梅59599 33美高梅59599 34美高梅59599 35{
美高梅59599 36//处理非微软浏览器的情况
美高梅59599 37 if(window.XMLHttpRequest)  
美高梅59599 38美高梅59599 39 美高梅59599 40{
美高梅59599 41  xhr=new XMLHttpRequest();
美高梅59599 42  xhr.onreadystatechange = callback;
美高梅59599 43  xhr.open(“Get”,url,true); 
美高梅59599 44  xhr.send(null); 
美高梅59599 45 }
美高梅59599 46//处理微软浏览器的情况
美高梅59599 47 else if(window.ActiveXObject)
美高梅59599 48美高梅59599 49 美高梅59599 50{
美高梅59599 51  xhr=new ActiveXObject(“macrosoft.XMLHttp”);
美高梅59599 52  if(xhr)
美高梅59599 53美高梅59599 54美高梅59599 55
美高梅59599 56  xhr.onreadystatechage=callback;
美高梅59599 57  xhr.open(“Get”,url,true);
美高梅59599 58  xhr.send();  
美高梅59599 59}
美高梅59599 60}
由上面可见,执行XMLHttpRequest实际上大多数代码还是用在处理浏览器的区别上面,针对不同的浏览器它还是要做出不同的处理,但是这样看上去也非常的直观。
 在上面的代码中,最关键的是:
xhr.onreadystatechage=callback  
它定义了回调函数,一旦响应它就会自动执行。
xhr.open(“”Get”,url,true);   true表示您想要异步执行该请求。

  if (!xmlHttp && typeof XMLHttpRequest != ‘undefined’) {
    //创建面向其它非微软浏览器的XMLHttpRequest对象
    xmlHttp = new XMLHttpRequest();
  }
</script>

美高梅59599,对于callback来说,我们有:

 

美高梅59599 61美高梅59599 62function processAjaxResponse() 美高梅59599 63{
美高梅59599 64//状态标识为已完成
美高梅59599 65美高梅59599 66  if (xhr.readyState == 4) 美高梅59599 67{
美高梅59599 68//已就绪
美高梅59599 69美高梅59599 70    if (xhr.status == 200) 美高梅59599 71{
美高梅59599 72      502 502’votes’).innerHTML = xhr.responseText;
美高梅59599 73美高梅59599 74    } else 美高梅59599 75{
美高梅59599 76      alert(“There was a problem retrieving the XML data:
美高梅59599 77” +
美高梅59599 78      xhr.statusText);
美高梅59599 79    }
美高梅59599 80  }
美高梅59599 81
美高梅59599 82

 

 就是说,一旦服务器处理完XMLHttpRequest并返回给浏览器,用xhr.onreadystatechange指派的回调方法将自动调用。

这个过程分为三步,首先我们定义一个xmlHttp来引用创建的XMLHttpRequest。然后,我们尝试在微软的浏览器中创建该对象,先用Msxml.XMLHTTP对象来创建,如果失败再尝试用macrosoft.XMLHTTP来创建它.最后,我们面向非微软浏览器来创建该对象.
 这样,我们创建了一个XMLHttpRequest对象,下面我们来看如何发出一个XMLHttpRequest请求。

上面差不多就是XMLHttpRequest的整个工作流程,它首先检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),然后根据服务器的设定询问请求状态,如果一切已经就绪(status=200),那么就执行下面需要的操作。

 

  知道了XMLHttpRequest的工作流程,我们可以看出,XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。
 
现在,我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口,它返回的是一个纯文本流,当然,这个文本流可以是XML格式,可以是Html,可以是Javascript代码,也可以只是一个字符串。这时候,XMLHttpRequest向服务器端请求这个页面,服务器端将文本的结果写入页面,这和普通的web开发流程是一样的,不同的是,客户端在异步获取这个结果后,不是直接显示在页面,而是先由javascript来处理,然后再显示在页面。至于现在流行的很多ajax控件,比如magicajax等,可以返回DataSet等其它数据类型,只是将这个过程封装了的结果,本质上他们并没有什么太大的区别。

 


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();  
      }
    }
}

admin

网站地图xml地图