AJAX简介
（编者按：本文基于W3C School的AJAX指南英文版本，作者进行了简单的重编，不妥之处请指正）
AJAX 全称 Asynchronous JavaScript And XML（异步Java脚本与XML）。个人认为最后的XML可以换成任何一种web客户或服务端应用程序，例如，HTML、PHP等。
利用AJAX技术创建的Web应用程序更加高效，同时你不用担心又要学习一种新语言了，因为AJAX只是建立在目前已经成熟的技术之上的高级应用罢了，利用Java脚本和HTTP request就能玩转AJAX。
几乎所有的Web程序员都希望自己写的程序更加高效，在不增加任何学习负担的前提下提高自己程序的效率，何乐而不为呢？一起来学习吧。
还是要提醒一下各位看官，学习AJAX需要一些简单的HTML/XHTML和JavaScript知识，如果还不清楚这些，那么建议先学习下。
数据异步传输（asynchronous data transfer）是AJAX中的核心概念。一般情况下，当用户需要从Web服务器下载文件、浏览网页，或者向服务器提交用户数据，就必须利用HTML表单和GET、POST命令。用户点击提交、确定按钮或链接确认请求服务器端数据，并等待服务器响应，浏览器随后加载新页面。服务器每次在接受到用户命令以后重新加载整个网页，由于页面的数据量很大，所有用户需要等上很长时间来重新下载数据。而大多数情况下，动态页面上只有相当小的一部分数据发生改变，AJAX利用JavaScript的XMLHttpRequest对象只向服务器端请求这部分更新的数据，从而大大缩短了浏览器加载网页的时间。由于网页上的数据是在不同时间向服务器请求的，因此称为数据异步传输。
让Web程序更小，运行更快，内容更丰富是所有Web程序员的追求。AJAX正是个不错的工具。
另外要记住，AJAX是一种独立于Web服务器的浏览器端应用技术，尽量不要让AJAX做服务器端才做的事情。XMLHttpRequest对象在只有下列浏览器支持Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7。
第一个AJAX程序
下面是一个AJAX应用的小例子，让你对AJAX有个感性认识：
一个简单的表单，testAjax.htm。注意表单中没有提交按钮。
<html> <body> <form> Name: <input /> Time: <input /> </form> </body> </html>
*不同浏览器创建XMLHttpRequest对象的方法不同。IE浏览器使用ActiveXObject，而其他浏览器使用JavaScript的内建对象XMLHttpRequest。好了，可以更新我们的testAjax.htm，判断你的浏览器是否支持AJAX。
<html> <body> <script> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("你的浏览器不支持 AJAX!"); return false; } } } } </script> <form> Name: <input /> Time: <input /> </form> </body> </html>
例子中判断浏览器是否支持AJAX，并根据不同浏览器对AJAX的支持程度创建了变量XmlHttp保存XMLHttpRequest对象。
深入了解XMLHttpRequest对象
在向服务器传递数据之前我们先来了解下XMLHttpRequest对象的几个重要属性。
Onreadystatechange属性
在向服务器发送请求后,我们需要一个函数接收服务器传回的数据进行后续处理。Onreadystatechange属性保存着这个处理服务器响应的函数。下面的例子中创建了一个空函数同时把这个函数赋给Onreadystatechange属性。
xmlHttp.onreadystatechange=function() { // 在这里添加代码 }
readyState属性
readyState属性中保存服务器响应状态字。当状态字发生改变则执行Onreadystatechange属性的函数。
状态 描述
0 The request is not initialized请求未初始化
1 The request has been set up请求已建立
2 The request has been sent请求已发送
3 The request is in process正在处理请求
4 The request is complete请求已完成
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } }
这段代码中对请求已完成（readyState==4）作出了响应，服务器返回的字符将在表单中显示。
向服务器发送请求
可以使用open()与send()方法向服务器发送请求。
Open()方法有三个参数。第一个定义请求类型，如GET/POST。第二个指定处理请求的服务端脚本URL。第三个指定请求是否以异步方式处理。然后使用send()方法将请求发送给服务器。如果我们确定PHP和HTML文件在同一个文件夹，代码如下：
xmlHttp.open("GET","time.php",true); xmlHttp.send(null);
我们还要决定什么时候执行AJAX函数。确定好这些以后，新的testAjax.htm完成了。
<html> <body> <script> function ajaxFunction() { var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("你的浏览器不支持 AJAX!"); return false; } } } xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open("GET","time.php",true); xmlHttp.send(null); } </script> <form> Name: <input onChange = "ajaxFunction();" /> Time: <input /> </form> </body> </html>
服务器端PHP脚本
ResponseText属性中保存了服务器端返回的数据。在这里我们返回的是当前的时间。Time.php代码如下：
<?phpecho date(H:i:s);?>
更多的例子
通过以上的讲解你是不是对AJAX有了基本的了解了呢？也许你已经跃跃欲试，但上面的例子在实际应用中还略显简单。
相关文章
精彩导读
热门资讯
关注我们
