Log4X

链路纵横
[搬家文]ajax初体验

最近在项目中遇到些棘手的事,常规方法解决起来颇为不易,只好动用新式武器ajax。

这个ajax我还真是头几次使用,不过它的魅力使我着迷。有了它,页面向服务器请求一些芝麻大小事的时候,终于不用把全部表单囫囵吞枣式的全部提交一次,而只要提交需要的信息,在页面的局部地方改变一下好了。

如果看到这篇文章的你不是编程人员,那么想象一下那些体育网站的nba文字直播(注意是文字)吧,以前的网页都是静态的,稍有某处不同,则整个页面需要重新刷新一次;而文字直播可以在其他地方完全不动的情况下,不断滚动播出新信息,另外比分板也会实时更新,呵呵,那就是ajax了。(滚动的比赛信息部分,有可能用的iframe,但是比分板一定是ajax,因为我也没有做过这方面,不好下定论)

至于ajax如何在我项目里面应用的,就不用多说了,只是ajax最关键的一个东西——XMLHttpRequest的特性需要说一说。

首先要从浏览器获取这个XMLHttpRequest对象,因为浏览器种类繁多,各浏览器对这个对象命名也不同,用如下代码在跨浏览器时比较可靠:

 

var xmlHttp;
   
try{
      xmlHttp 
= new ActiveXObject('Msxml2.XMLHTTP');
   }
   
catch(e)
   {
      
try{
       xmlHttp 
= new ActiveXObject('Microsoft.XMLHTTP');
      }
      
catch(e){
       
try{
        xmlHttp 
= new XMLHttpRequest();
       }
       
catch(e){}
      }
   }

 

3层嵌套的try - catch,挺丑的,但实用。

获取这个XMLHttpRequest对象了以后,就该在交互方面做点什么了,于是

用XMLHttpRequest.open()方法可以创建一个请求,也就好比,前面的try - catch使你拿到了枪,而open()方法则是上了膛。只等发射了。 open()方法还带4个参数,其中包括一个uri,可以指向一个action,这样你就能靠这个action在servlet上干任何复杂的逻辑,并返回本次请求所需的结果。有关open()方法的详细可以在其他学习和说明文档中找到用法。

当然不是所有枪都是上了膛就马上发射,还得确定目标,也就是要搞清楚到底干什么,要杀谁。XMLHttpRequest也是。XMLHttpRequest由一个回调函数,onreadystatechange(),在这个函数中写好内容,当XMLHttpRequest的每一次 准备状态(下面提到)改变,都会调用它

onreadystatechange()里面也是惯用法

 

xmlHttp.onreadystatechange = function(){
      
if(xmlHttp.readyState == 4)
      {
       
if(xmlHttp.status == 200){
      document.all.filetable.deleteRow(currRow.rowIndex);
//执行删除
       }
       
else{
        alert(
"error");
       }
      }
   }

 

readyState 是一个XMLHttpRequest的准备状态,当它等于4的时候,说明结果已经产生并返回客户端,随时准备使用了,所以一般都是检查它为4的时候,进行进一步操作。

status 是XMLHttpRequest在得到响应之后的一个状态,200的意思是"OK",说明一切没问题,于是可以接上实际的操作了(服务器端的逻辑操作窃谇懊嫠 祏ri指向的action中处理,用户浏览器端的显示,就是靠这块被两个if包起来的地方了),一般这里还会用到一个xmlHttp.responseText的属性,它是由action从服务器端返回的结果,这里返回是null,所以没有用到,注意的是,responseText在readyState =4时候,才是完整可用的。

最后,也是最关键的一步,就是xmlHttp.send(null);null 的地方还可以添一些数据,会以post方式提交。

上膛的枪,总算扣动了扳机。

(注意onreadystatechange()方法是回调函数,不会主动执行,而send是把xmlHttp产生的请求真正提交的方法,在此后,每当xmlHttp的readystate改变,都会调用一次onreadystatechange())

PS:

接着还有一个小问题,就是javascript中的引号,javascript中对于双引号和单引号好像都是一视同仁的,就当做是一个东西,所以每次看到javascript,总觉得里面引号好乱。不过有个关键点是,在嵌套的时候,单双引号要交互使用,而不能 " " abcd" " 或者 ' 'abcd' ',因为引号不像括号,开始和结束的引号都是一样的,所以" " abcd" "会被当成" " abcd" ",' 'abcd' '同理。用" 'abcd' "或 ' "abcd" '都是正确的

posted on 2008-08-13 19:57  YYX  阅读(235)  评论(0编辑  收藏  举报