Ajax工做原理

一： ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

二：关于同步和异步

 异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

具体来讲，异步传输是将比特分红小组来进行传送。通常每一个小组是一个8位字符，在每一个小组的头部和尾部都有一个开始位和一个中止位，它在传送过程当中接收方和发送方的时钟不要求一致，也就是说，发送方能够在任什么时候刻发送这些小组，而接收方并不知道它何时到达。一个最明显的例子就是计算机键盘和主机的通讯，按下一个键的同时向主机发送一个8比特位的ASCII代 码，键盘能够在任什么时候刻发送代码，这取决于用户的输入速度，内部的硬件必须可以在任什么时候刻接收一个键入的字符。这是一个典型的异步传输过程。异步传输存在 一个潜在的问题，即接收方并不知道数据会在何时到达。在它检测到数据并作出响应以前，第一个比特已通过去了。这就像有人出乎意料地从后面走上来跟你说 话，而你没来得及反应过来，漏掉了最前面的几个词。所以，每次异步传输的信息都以一个起始位开头，它通知接收方数据已经到达了，这就给了接收方响应、接收 和缓存数据比特的时间；在传输结束时，一个中止位表示该次传输信息的终止。按照惯例，空闲（没有传送数据）的线路实际携带着一个表明二进制1的信号。步传输的开始位使信号变成0，其余的比特位使信号随传输的数据信息而变化。最后，中止位使信号从新变回1，该信号一直保持到下一个开始位到达。例如在键盘上数字“1”，按照8比特位的扩展ASCII编码，将发送“00110001”，同时须要在8比特位的前面加一个起始位，后面一个中止位。

同步传输的比特分组要大得多。它不是独立地发送每一个字符，每一个字符都有本身的开始位和中止位，而是把它们组合起来一块儿发送。咱们将这些组合称为数据帧，或简称为帧。

　　数据帧的第一部分包含一组同步字符，它是一个独特的比特组合，相似于前面提到的起始位，用于通知接收方一个帧已经到达，但它同时还能确保接收方的采样速度和比特的到达速度保持一致，使收发双方进入同步。

　　帧的最后一部分是一个帧结束标记。与同步字符同样，它也是一个独特的比特串，相似于前面提到的中止位，用于表示在下一帧开始以前没有别的即将到达的数据了。

　　同步传输一般要比异步传输快速得多。接收方没必要对每一个字符进行开始和中止的操做。一旦检测到帧同步字符，它就在接下来的数据到达时接收它们。另外，同步传输的开销也比较少。例如，一个典型的帧可能有500字节（即4000比特）的数据，其中可能只包含100比特的开销。这时，增长的比特位使传输的比特总数增长2.5%，这与异步传输中25 %的增值要小得多。随着数据帧中实际数据比特位的增长，开销比特所占的百分比将相应地减小。可是，数据比特位越长，缓存数据所须要的缓冲区也越大，这就限制了一个帧的大小。另外，帧越大，它占据传输媒体的连续时间也越长。在极端的状况下，这将致使其余用户等得过久。

三：

ajax原理和XmlHttpRequest对象

　　Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。要清楚这个过程和原理，咱们必须对 XMLHttpRequest有所了解。

　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

  　因此咱们先从XMLHttpRequest讲起，来看看它的工做原理。

  　首先，咱们先来看看XMLHttpRequest这个对象的属性。

  　　它的属性有：

  　　onreadystatechange  每次状态改变所触发事件的事件处理程序。

  　　responseText     从服务器进程返回数据的字符串形式。

  　　responseXML    从服务器进程返回的DOM兼容的文档数据对象。

  　　status           从服务器返回的数字代码，好比常见的404（未找到）和200（已就绪）

  　　status Text       伴随状态码的字符串信息

  　　readyState       对象状态值

　　　　0 (未初始化) 对象已创建，可是还没有初始化（还没有调用open方法）

　　　　1 (初始化) 对象已创建，还没有调用send方法

　　　　2 (发送数据) send方法已调用，可是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，由于响应及http头不全，这时经过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时能够经过经过responseXml和responseText获取完整的回应数据

注：因为各浏览器之间存在差别，因此建立一个XMLHttpRequest对象可能须要不一样的方法。这个差别主要体如今IE和其它浏览器之间。下面是一个比较标准的建立XMLHttpRequest对象的方法。

    eg:

var xmlHttp;
//针对不一样浏览器生成XMLHttpRequest对象的方法
function getXmlHttp(){  

//IE浏览器建立XmlHttpRequest对象

if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("MICROSOFT.XMLHTTP");
    }

//非IE浏览器建立XmlHttpRequest对象

else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
}

 

function sendParam(obj){

 if (!xmlhttp) {
        alert("建立xmlhttp对象异常！");
        return false;
 }

    getXmlHttp();   

  xmlHttp.open("GET","check.php?user="+obj,true);    

xmlHttp.onreadystatechange = getTxt;  

   xmlHttp.send(null);

}

 

function getTxt(){  

     if(xmlHttp.readyState == 4){     

            if(xmlHttp.status == 200){     

                var sp = document.getElementById("warning");      

                var flag = xmlHttp.responseText;

     if(flag == "1"){                

               sp.innerHTML = "该用户已经被注册,请输入其余用户名";                

               sp.style.cssText = "color:red;font-size:14px";            

                          }else{               

                sp.innerHTML = "能够注册";               

                 sp.style.cssText = "color:green;font-size:14px";             }

                               }   

                  }

     }

 

 

 

 

 

如上所示，函数首先检查XMLHttpRequest的总体状态而且保证它已经完成（readyStatus=4），即数据已经发送完毕。而后根据服务器的设定询问请求状态，若是一切已经就绪（status=200），那么就执行下面须要的操做。

对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：

a、向服务器提交数据的类型，即post仍是get。

b、请求的url地址和传递的参数。

      c、传输方式，false为同步，true为异步。默认为true。若是是异步通讯方式(true)，客户机就不等待服务器的响应；若是是同步方式(false)，客户机就要等到服务器返回消息后才去执行其余操做。咱们须要根据实际须要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，然后一个是会覆盖前一个的，这个时候固然要指定同步方式。

    Send方法用来发送请求。

 

　　知道了XMLHttpRequest的工做流程，咱们能够看出，XMLHttpRequest是彻底用来向服务器发出一个请求的，它的做用也局限于此，但它的做用是整个ajax实现的关键，由于ajax无非是两个过程，发出请求和响应请求。而且它彻底是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通讯的问题因此才会如此的重要。

　　如今，咱们对ajax的原理大概能够有一个了解了。咱们能够把服务器端当作一个数据接口，它返回的是一个纯文本流，固然，这个文本流能够是XML格式，能够是Html，能够是Javascript代码，也能够只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是同样的，不一样的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，而后再显示在页面。至于如今流行的不少ajax控件，好比magicajax等，能够返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并无什么太大的区别。