/**
* 转载请注明作者longdick http://longdick.iteye.com
*
*/
又见Ajax? Ajax应该是算在所谓的下一代web app编写规范的范畴中，但是其所使用的技术并不新，主要涉及到的技术无非就是Javascript脚本，XML，当然不能少了支持它的浏览器。还有就是传的神乎其神的异步特性，以至于人们以为Ajax就是“Asynchronous JavaScript and XML”的缩写，看上去的确很像，但是据Ajax的发明人Jesse James Garrett所说，Ajax这个名字并不是“Asynchronous JavaScript and XML”的缩写，那究竟是什么名字的缩写呢？
这是一个谜~~ -_-|||
还好我们今天并不关注这个问题。我们今天来搭建一个最简单最纯粹的Ajax应用，不使用任何的框架技术如DWR、Ajax.net等。
服务端就用java来描述啦，我们要做的这个应用非常简单，只有一个html页面index.html和一个servlet；
html页面的主要代码就是这样：
<form name="form1" method="post">
<table align="center"><tr><td>
<input type="text" name="text1">
</td></tr>
<tr><td>
<input type="button" value="从服务端取值" οnclick="getValue()">
</td></tr>
</table>
</form>
servlet里主要代码是这样写的：
private int i=0;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.getWriter().write(String.valueOf(i++));
}
大家看明白了吗，我们想要的效果就是，每次浏览器端按一下按钮，就发送一个请求给服务器端servlet，然后servlet返回一个不断自增的整型值，最后客户端要把这个值取得，显示在form1表单里的text1文本框中。这个效果在以前的话，非常简单，无非就是客户端和服务端一次对话而已；但是今天我们使用Ajax的特性来实现，让客户端和服务端的对话以异步的方式进行，这样可以避免讨厌的reload，增加用户体验：）
稍微了解过一些Ajax原理的同志都知道，Ajax主要是用一种特殊对象实现在客户端和服务端的传递数据的，这种对象一般书上都说叫 XMLHttpRequest对象。但是只对了一部分，因为这是因不同的浏览器而异的，在salari，firefox和opera等一些非IE的浏览器上的确用的是XMLHttpRequest对象；但在IE浏览器上是用一个叫做ActiveXObject的对象，而且不同版本的IE支持的ActiveXObject还不完全一样。。。。。晕啊，为什么没有一个标准呢。-_-
接下来在index.html <head>标签里加入以下代码：
var request=null;
function createRequest(){
try{
request=new XMLHttpRequest();
}catch(trymicrosoft){
try{
request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request=null;
}
}
}
if(request==null)alert("error creating request! ");
}
这些代码的主要作用就是create一个Ajax要使用的request对象，要确保所有的浏览器下都能创建成功。。。
create完了以后呢，当然没完，接下来要设置点击按钮事件，当点击按钮时会触发一次浏览器和服务端的对话。这个光荣的任务当然需要javascript来完成，我们定义一个函数getValue() 函数体如下：
function getValue(){
createRequest(); //创建一个新的Request
var url="servlet\\AjaxServlet"; //指定服务端的URL地址，在这里是我们的servlet访问地址
request.open("GET",url,true);
request.onreadystatechange=updatePage;
request.send(null);
}
request.open("GET",url,true);这句话的意思是启动一个request，这个open()函数有三个参数：第一个是request对象的发送方式，你可以选择“GET”或者“POST”；第二个参数是要对话的服务端访问路径；第三个参数是个Boolean，true的话就是指以异步的方式发送请求，false的话就用同步。
request.onreadystatechange=updatePage;指定了request的onreadystatechange事件触发时所调用的脚本函数，只要request对象的readystate发生改变时就触发这个事件，updatePage也就是所谓的回调函数。这个设置需要放在request对象被发送前才能起作用，updatePage不要加上()。
request.send(null);会把这个request发送到指定的URL，不带任何发送参数。
记得在text1文本框控件加上onclick事件，调用这个getValue()函数就可以。
回调函数updatePage()的定义如下：
function updatePage(){
if(request.readyState==4){
if(request.status==200){
var v=request.responseText;
document.form1.text1.value=v;
}else
alert("error status:"+request.status);
}
}
首先判断request的readyState属性和status属性是否都是完成对话状态，如果是的话就执行里面的语句。
关于readyState和status属性的问题，可以参考这篇文章 。
在回调函数里我们用request对象的responseText属性来接收服务端返回的文本值。
最后tomcat开起来，这个Ajax应用放上去以后，测试一下，嘿，每点击一次“从服务端取值”按钮，都会从服务端取回一个整数值，回显在text1文本框中，在此过程中，页面没有出现任何reload。GREAT!!!
6846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
