/**
* 转载请注明作者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!!!