试试纯粹的Ajax吧(一)-----Give me a try！

longdick

浏览: 584852 次
性别:
来自: 0

最近访客更多访客>>

zdyujia

woo1oow

skypiggy

流星空中

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Ajax 应用服务器 IE 浏览器 JavaScript

/**

* 转载请注明作者longdick http://longdick.iteye.com

试试纯粹的Ajax吧 (二)----让server返回更多

试试纯粹的Ajax吧 (三)----JSON Now！

又见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="从服务端取值" onclick="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!!!

0
顶

0
踩

分享到：

深入了解XMLHttpRequest | Oracle中文问题的处理

2008-11-19 00:03
浏览 1680
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论