AJAX 异步传输的WEB模式

如果有这么一种需求，即希望在不更新页面的情况下与服务器端进行数据交互，并且你的行为能够实时得到相应，那么就可以使用这篇博文要介绍的技术。
AJAX指异步JavaScript及XML（Asynchronous JavaScript And XML）。
AJAX是一种在2005年由Google推广开来的编程模式，不是一种新的编程语言，而是一种使用现有标准的新方法。
通过AJAX，你的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，你的JavaScript可在不重载页面的情况与Web服务器交换数据。
AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

Ajax的核心是JavaScript对象XmlHttpRequest，用于在后台与服务器交换数据。
XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户，即实现异步请求。
几乎所有的浏览器（IE7+、Firefox、Chrome、Safari、Opera）都支持XMLHttpRequest对象（IE5和IE6使用的是ActiveXObject）。

下面就来学习一下这一编程模式。
1. 创建XmlHttpRequest对象：
下面是一个XmlHttpRequest对象的创建方法，

1//该函数为不同浏览器创建不同的对象。

2function GetXmlHttpObject()

3{

4var xmlHttp=null;

5try

6 {

7 // Firefox, Opera 8.0+, Safari

8 xmlHttp=new XMLHttpRequest();

9 }

10catch (e)

11 {

12 //Internet Explorer

13 try

14  {

15  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

16  }

17 catch (e)

18  {

19  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

20  }

21 }

22return xmlHttp;

23}

2. 向服务器端发送请求：
刚才创建了过XHR对象，现在就利用它向服务器端发生请求。

1xmlHttp.open("GET",url,true);

2xmlHttp.send();

其中open(method,url,async)用于声明请求类型：
参数method是Get或Post;
参数url是请求位置；
参数async是异步与否，true异步，false同步。
send(string)用于发送请求：
参数string仅用于Post，Get不需要参数。

3. 获取来自服务器的响应：
来自服务器的响应有两种形式:字符串类型responseText和xml类型responseXML。
这里只说第一种，利用这一句就把服务器响应的内容传回到当前页面。

1document.getElementById("myDiv").innerHTML

2     =xmlhttp.responseText;

4. onreadystatechange事件:
readyState属性存有XMLHttpRequest的状态信息，从0到4共五种状态。每当readyState改变时，就会触发onreadystatechange事件，即调用对应的函数。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

1//每当XHR对象的状态发生改变，则会调用该函数，来处理页面。

2//比如，将返回数据显示到页面中，需要填充到某个元素中。

3xmlhttp.onreadystatechange=function()

4{

5if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

6 {

7 document.getElementById("myid").innerHTML

8          =xmlHttp.responseText

9 }

10}

5.Ajax是前端技术，将1-4所做的写在页面加载的js文件中即可实现。
后端的php是没什么特别的，正常处理请求即可。
展示的页面上要添加把事件（如键盘或鼠标事件）同处理函数对应起来。

1<form>

2<input type="text" id="txt" onkeyup="show(this.value)">

3</form>

4<div id="myid">The response will be here.</div>

以上就是ajax的核心内容，在架构上也没什么特殊之处，但却是很有用的。