AJAX异步请求原理和过程

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），它不是一种新的编程语言，而是一种使用现有标准的新方法。

AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）的，由于AJAX 经过在后台与服务器交换少许数据的方式，容许网页进行异步更新。这意味着有可能在不重载整个页面的状况下，对网页的一部分进行更新，经过 AJAX，你能够建立更好、更快以及更友好的 WEB 应用程序
Ajax 能够调用服务器任何资源，能够调用动态页面、静态页面，也能够调用json对象，可是因为浏览器没法解析二进制文件，故调用图片等时就会报错。

调用json对象时，必须使用eval（"(" + 返回的对象 + ")"）;,不然没法解析对象的资源。

AJAX异步请求原理和过程：

一、AJAX建立异步对象XMLHttpRequest ：

AJAX 的要点是 XMLHttpRequest 对象。不一样的浏览器建立 XMLHttpRequest 对象的方法是有差别的。IE浏览器使用 ActiveXObject，而其余的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。如需针对不一样的浏览器来建立此对象，咱们要使用一条 "try and catch" 语句。以下示例：

<script type="text/javascript">
function GetXmlHttpObject()
{
　　var xmlHttp=null;
　　

    try{
   　　    // Firefox, Opera 8.0+, Safari等浏览器建立XMLHttpRequest对象的方法
    　　    xmlHttp=new XMLHttpRequest();
        }
 　　catch (e){
  　　　　// Internet Explorer浏览器建立XMLHttpRequest对象的方法
   　　try{
      　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//IE6.0以上的浏览器建立XMLHttpRequest对象的方法
       }
   　　catch (e){
      　　try{
         　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE6.0如下的浏览器建立XMLHttpRequest对象的方法
         }
      　　catch (e){
         　　alert("您的浏览器不支持AJAX！");
         　　return false;
         }
      }
    }

　　return xmlHttp;
}
</script>

 

首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。

而后使用 XMLHttp=new XMLHttpRequest() 来建立此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。

假如这三种方法都不起做用，那么这个用户所使用的浏览器已经太过期了，他或她会看到一个声明此浏览器不支持 AJAX 的提示。

二、操做XMLHttpRequest 对象：

（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）

（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，相似函数指针，如
　　xmlHttp.onreadystatechange=function()
　　{
　　　　// 咱们须要在这里写一些代码
　　}
（3）获取异步对象的readyState 属性：该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
　　readyState 属性可能的值：
　　0 请求未初始化（在调用 open() 以前）
　　1 请求已提出（调用 send() 以前）
　　2 请求已发送（这里一般能够从响应获得内容头部）
　　3 请求处理中（响应中一般有部分数据可用，可是服务器尚未完成响应）
　　4 请求已完成（能够访问服务器响应并使用它）

在调用时，咱们要向这个 onreadystatechange 函数添加一条 If 语句，来测试咱们的响应是否已完成（意味着可得到数据）：

　　xmlHttp.onreadystatechange=function()
　　{
　　　　if(xmlHttp.readyState==4)
　　　　{
　　　　　　// 从服务器的response得到数据
　　　　}
　　}

（4）判断响应报文的状态，若为200说明服务器正常运行并返回响应数据，

（5）读取响应数据，能够经过 responseText 属性来取回由服务器返回的数据。

　　
　　xmlHttp.onreadystatechange=function()
　　{
　　　　if(xmlHttp.readyState==4){

　　　　　　if(xmlHttp.status==200){

　　　　　　　　document.myForm.time.value=xmlHttp.responseText;

　　　　　　}
　　　　}
　　}

 示例以下：

<script type="text/javascript">

function ajaxFunction()
 {
 　　var xmlHttp=GetXmlHttpObject（）;//定义XMLHttpRequest对象
　　

　　xmlHttp.open("GET","****.ashx",true)//设置请求方法，请求的目标页面，以及是否异步

　　xmlHttp.setRequestHeader("If-Modified-Since","0");

　　xmlHttp.onreadystatechange=function(){　　//定义XMLHttpRequest对象的onreadystatechange属性 　　

　　　　if(xmlHttp.readyState==4)　{　　　//判断XMLHttpRequest对象的状态 
　　　　　　if(xmlHttp.status==200){

　　　　　　　　document.myForm.time.value=xmlHttp.responseText;//经过XMLHttpRequest对象的responseText属性获取回传的数据 
　　　　　　} 
　　　　}
　　} 
　　xmlHttp.send(null);//发送异步请求 
} 

</script> 
<form name="myForm"> 
　　用户: <input type="text" name="username" onkeyup="ajaxFunction();" /> 　　时间: <input type="text" name="time" /> </form> </body> </html>