AJAX 异步传输的WEB模式

如果有这么一种需求，即希望在不更新页面的情况下与服务器端进行数据交互，并且你的行为能够实时得到相应，那么就可以使用这篇博文要介绍的技术。

AJAX指异步JavaScript及XML（AsynchronousJavaScriptAndXML）。

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	//该函数为不同浏览器创建不同的对象。

2	function GetXmlHttpObject()

3

{

4	var xmlHttp= null ;

5

try

6

{

7	// Firefox,Opera8.0+,Safari

8	xmlHttp= new XMLHttpRequest();

9

}

10

catch (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

}

22	return xmlHttp;

23

}

2.向服务器端发送请求：

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

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

2	xmlHttp.send();

其中open(method,url,async)用于声明请求类型：

参数method是Get或Post;

参数url是请求位置；

参数async是异步与否，true异步，false同步。

send(string)用于发送请求：

参数string仅用于Post，Get不需要参数。

3.获取来自服务器的响应：

来自服务器的响应有两种形式:字符串类型responseText和xml类型responseXML。

这里只说第一种，利用这一句就把服务器响应的内容传回到当前页面。

1	document.getElementById( "myDiv" ).innerHTML

2	=xmlhttp.responseText;

4.onreadystatechange事件:

readyState属性存有XMLHttpRequest的状态信息，从0到4共五种状态。每当readyState改变时，就会触发onreadystatechange事件，即调用对应的函数。

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

4:请求已完成，且响应已就绪

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

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

3	xmlhttp.onreadystatechange= function ()

4

{

5	if (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 responsewillbehere.</ div >

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