Ajax的基本请求/响应模型

1、Ajax工做核心

Ajax的核心是JavaScript对象XMLHttpRequest（简称XHR）。它是一种支持异步请求的技术。能够经过使用XHR对象向服务器提出请求并处理响应，而不阻塞用户。

Ajax能够完成的功能有：

• 在不从新加载页面的状况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

 1.1 Ajax简介

　　Ajax能够说 是目前最流行的 WEB 技术，它采用客户端脚本与 Web 服务器交换数据，也就是说，客户端的表单请求不是直接给 WEB 服务器，而是一些 Javascript 脚本，再经过 JS 内置的 xmlhttprequest 对象，异步的将请求发送给 WEB 服务器， WEB 服务器处理完以后再回发给 Javascript 脚本 , 而后动态的更新页面数据。因而可知 AJAX 并非一种独立的技术，而是由 Javascript+DHTML+DOM+HTML 多种技术的组合 , 它少了等待服务器响应的时间，而且它可使页面局部刷新，由此加强了用户体验。

2、Ajax开发步骤

2.1XMLHttpRequest对象

Ajax核心对象XmlHttpRequest对象的经常使用的方法和属性以下：

• open()：创建到服务器的新请求
• send()：向服务器发送请求
• abort()：放弃当前请求
• readyState：对象状态值，未为初始化、正在加载、加载完毕、交互、完成五种。
• responseText ：服务器返回的请求文本信息
• onreadystatechange：每次状态改变所触发的事件处理程序
• responseXML：从服务器进程返回的DOM兼容的文档数据对象
• status：从服务器返回的数字代码，如404（未找到）
• statusText：伴随状态码的字符串信息

 XMLHttpRequest对象的建立以及与服务器的交互以下代码所示：

<script language="javascript" type="text/javascript">
function callServer()
{
     var xmlHttp = new XMLHttpRequest();
     var ID = document.getElementById("ID").value;
     var PASS= document.getElementById("PASS").value;
　　  if((ID == null) ||(ID == "")) return;
     if((PASS== null) ||(PASS == "")) return;
     //建立url连接
    var url = "Login?Id="+escape(ID)+"&PASS="+escape(PASS);
　　//最后一个参数若是是true的话，那么将请求一个异步连结
    xmlHttp.open("POST",url,true);
    //若是服务器完成请求，RefreshPage函数被触发
    xmlHttp.onreaadstatechange = RefreshPage;
    //发送请求
    xmlHttp.send(null);
}

function RefreshPage()
{
    if(xmlHttp.readyState == 4)
   {
        alert('服务器返回的数据为： ' + xmlHttp.responseText);
   }
}
</script>

2.2 获取Request对象：

因为不一样浏览器的差别，获取XmlHttpRequest对象须要采用不一样的方式

<script language="javascript" type="text/javascript">
<!--
    var xmlhttp;
    // 建立XMLHTTPRequest对象
    function createXMLHTTPRequest(){
        if(window.ActiveXObject){ // 判断是否支持ActiveX控件
            xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 经过实例化ActiveXObject的一个新实例来建立XMLHTTPRequest对象
    }
    else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
        xmlhttp = new XMLHTTPRequest(); // 建立XMLHTTPRequest的一个实例（本地javascript对象）
    }
    }
//-->
</script>

2.3 Ajax的基本请求/响应类型

Ajax应用程序中处理服务请求的流程以下：

• 从web表单中获取须要提交的数据
• 创建要连结的url
• 打开到服务器的链接
• 设置服务器在完成后要运行的函数
• 发送请求

 2.4 调用Ajax过程

<form>
    <p>用户ID:<input type="text" name="ID" id="city" size="10" onChange="callServer();"/> </p>
    <p>口令:<input type="text" name="PASS" id="state" size="16" onChange="callServer();"/> </p>
</form>