本节简介（异步链接服务器对象）xmlHTTPRequest以及AJAX的简介。
AJAX即“Asynchronous javascript And XML”（异步Javascript和XML）。AJAX有四个方面的好处：1.即减轻了服务器的负担。2带来了更好的用户体验。3.基于标准被广泛的支持。4.拥有更好的页面呈现和数据分离。
| 技术名称 | 技术说明 |
| javascript | javascript是通用的脚本语言，AJAX是用javascript编写的 |
| CSS | 用户界面的样式通过css来修改 |
| DOM | DOM通过javascript修改DOM，ajax可以在运行时改变用户界面，或者局部更新页面中的某个节点。 |
| xmlhttpRequest | XMLHttpRequest对象 XMLHttpRequest对象允许web程序员从web服务器以后台的方式获取数据。数据的个数通常是XML或者是文本。 |
从上面我们看出，javascript就想胶水一样将各个部分粘贴在一起，例如通过javascript操作BOM改变刷新用户界面，通过修改className来改变css样式风格
1.异步对象连接服务器
不严谨的说，ajax是一个简单的多线程，它能够是用户在前台多种操作而不间断。ajax异步交互在后台默默的工作着 在web中异步访问是通过XMLHttpRequest对象来实现的，该对象最早是在ie5被作为activeX控件引入的。随后各个浏览器纷纷支持该异步对象，首先必须创建对象。代码如下：
var xmlHttp; function createXMLHrrpRequest() { if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); }该对象是先创建了一个全局变量xmlHttp，留以后函数中使用。另外创建异步对象函数createXMLHrrpRequest()
该过程用到了if语句方法，如果是IE采用window.ActiveXobject方法，如果不是，则用XMLHttpRequest方法创建函数。
在创建完异步对象后，自然是使用该对象连接服务器，该对象有一系列十分有用的属性和方法。
| 属性/方法 | 说明 |
| abort() | 取消请求 |
| getAllResponseHeaders() | 获取指定的Http头 |
| open(method,url) | 创建请求，method指定请求类型，GET POST |
| send() | 发送请求 |
| setRequestHeader() | 指定请求的http头 |
| onreadystatechange | 发生任何状态变化时的事件控制对象 |
| readyState | 请求的状态 0为尚未初始化 1为正在发送请求 2为请求完成 3为请求成功，正接收数据。 4为接收数据成功 |
| responseText | 服务器返回文本 |
| responseXML | 服务器返回xml |
| status | 服务器返回的http请求响应值，常用的有 200表示请求成功 202表示请求被接收，但处理未完成 400表示错误的请求 404表示资源未找到 500表示内部服务器错误，如aspx代码错误 |
创建完XMLHttpRequest对象后首先利用open()方法建立一个请求，并向服务器发送，该方法的完整表示式如下：
open(methond,url,asynchronous,user,passWord)
其中，method表示请求的类型，通长为GET，POST。
url即请求的地址，可以是绝对地址，也可以是相对地址。
asynchronous是一个布尔值，表示是否为异步请求，默认值为异步请求true。
user、password分别为可选的用户名、密码。
创建了异步对象后，要建立一个到服务器的请求可使用如下代码：
xmlHttp.open("GET","1-1.aspx",true);以上代码用get方法请求的相对地址为9-1.aspx的页面，方式是异步的。在发出了请求后便需要请求的状态readyState属性来判断请求的情况，如果该属性变化了，就会触发onreadystatechange事件，因此通常的代码如下:
<script type="text/javascript"> xmlHttp.onRecorderStateChange = function(){ if(xmlHttp.readyState == 4) //执行相关代码 } </script>也就是直接编写onRecorderStateChange的事件函数，如果readyState的状态为4（数据接收成功）则继续操作。但是通常情况下，不但需要判断请求的状态，还要判断服务器返回的状态status,因此上述代码改为
<script type="text/javascript"> xmlHttp.onRecorderStateChange = function(){ if(xmlHttp.readyState == 4&& xmlHttp.status==200) //执行相关代码 } </script>以上两段代码仅仅只是建立了请求，还需要使用send()方法来发送请求，该方法的原型如下：
send(body);
改方法仅有一个参数body，它表示要向服务器发送的数据，其格式为查询字符串的形式，例如：
var body = "myName=isaac&age=25";
如果再open中指定的是get方式，则这些参数作为查询字符串提交，如果指定的是post方式，则作为HTTP的POST方法提交。对于send()而言。body参数是必须的，如果不发送任何数据，则可以使用
xmlHttp.send(null)
特别的，如果使用POST方法进行提交请求，那么在发送之前必须使用以下语句来设置HTTP的头，语法如下：
xmlHttp.setRequestHeader("content-Type","application/x-www-form-urlencoded;")服务器在收到客户端请求之后，根据请求返回相应的结果，这个结果通常为两种形式，一种是文本形式，存储在responseText中；另一种是XML格式，存储在responseXML中。客户端程序可以对前者进行字符串的处理，对后者进行DOM相关的处理，例如可以对服务器返回值做如下的处理：
alert("服务器返回："+xmlHttp.responseText);上述整个异步连接服务器的过程如下：
<body> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); } function startRequest() { createXMLHttpRequest(); xmlHttp.open("GET", "http://study.ahthw.com/ajaxresponse/1-1.aspx", true); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) alert("服务器返回: " + xmlHttp.responseText); } xmlHttp.send(null); } </script> <input type="button" value="测试异步通讯" onClick="startRequest()"> </body>实例：http://study.ahthw.com/ajaxresponse/1-1.html
为了解决异步连接ie缓存问题，需要在真实地址加一个与时间毫秒相关的参数，使得每次请求的地址都不一样。而该参数服务器确是不需要的。
var sUrl = "1-1.aspx?"+new Date().getTime();//地址不断变化 XMLHttp.open("GET",sUrl,true);http://study.ahthw.com/ajaxresponse/1-2.html
2.GET和POST模式
上面的实例中，除了请求异步服务器以外，并没有向服务器发送额外的数据，通常在html请求中有get和post模式，这两种模式都可以作为异步请求发送数据的方式。
如果是GET请求，则直接把数据放入异步请求的URL地址中，而send方法不发送任何数据，例如：
var queryString = "firstName=isaac&birthday=0226"; var sUrl = "1-1.aspx?" + queryString + "×tamp" + new Date().getTime(); xmlHttp.open("GET", sUrl); xmlHttp.send(null); //该语句只发送null如果是POST模式，则是把数据统一在send()方法中送出，请求地址没有任何信息，并且必须设置请求的文件头，例如：
<script language="javascript"> var queryString = "firstName=isaac&birthday=0226"; var sUrl = "1-1.aspx?" + queryString + "×tamp" + new Date().getTime(); xmlHttp.open("POST", sUrl); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(queryString); //该语句负责发送数据 </script>实例
为了更清楚地演示GET和POST的区别，编写示例代码，首先创建两个文本框用于输入用户姓名和生日，并建立两个按钮分别用于GET和POST两个方法来发送异步请求
<form> <p><input type="text" id="firstName"/></p> <p><input type="text" id="birthday" /></p> </form> <input type="button" value="GET" onClick="doRequestUsingGET()"> <input type="button" value="POST" onClick="doRequestUsingPOST()">
其中用户填写的数据统一用函数createQueryString()编写，需要时予以调运，代码如下
function crrateQueryString() { var firstName = document.getElementById("firstName").value; var birthday = document.getElementById("birthday").value; var queryString = "firstName=" + firstName + "&birthday=" + birthday; return queryString; }服务器接收到请求数据后根据不同的时刻返回相应的文本，客户端接收到文本后显示在相应的div快中，代码如下
function handleStateChange() { if (xmlHttp.readyState == 4 && xmlHttp.state == 200) { var responseDiv = document.getElementById("serverResponse"); responseDiv.innerHTML = xmlHttp.responseText; } }GET和POST各建立自己的函数doRequestUsingGET()和doRequestUsingPOST()。
完整代码如下：
<script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); } function createQueryString() { var firstName = document.getElementById("firstName").value; var birthday = document.getElementById("birthday").value; var queryString = "firstName=" + firstName + "&birthday=" + birthday; return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题 } function doRequestUsingGET() { createXMLHttpRequest(); var queryString = "1-3.aspx?"; queryString += createQueryString() + "&time
新闻热点
疑难解答
