深入挖掘AJAX（来源：http://superbo8888.javaeye.com）

用面向对象的思维来写JS | 告诉你AJAX怎么玩
2007-05-23
深入挖掘AJAX
关键字: 深入挖掘AJAX

有一半清醒,有一半醉!这可能是众位看客看过之前两篇博客后的感觉.没关系,继续闷头看起!!!

你的脑壳一定要建立这样一种信念,ajax不是新的技术,而是对客户端技术js/dom/css的综合运用而已.所以掌握ajax,最重要是在锤炼你的js/dom/css功底.从web应用角度来看,无非就是处理两种事情

1.request-请求即浏览器向服务器请求数据

我们来看看在request方都需要做哪些事情呢?

1.1XMLHttpRequest对象的构建

ajax方式的请求是借助浏览器的一个对象XMLHttpRequest来实现.而获取 XMLHttpRequest对象在不同类型的浏览器中的方式不同,火狐浏览器直接通过new XMLHttpRequest()来完成,而对于IE浏览器来说,则需要根据IE的不同版本来实现XMLHttpRequest对象的构建.当获得 XMLHttpRequest对象后保存在一个变量中,命名成http_request.

1.2设置响应处理函数

在发送请求数据的时候,就需要提前设置谁来处理服务器返回的数据,对客户端来讲,当然就是某个js函数了.这里设置响应处理函数用这样一句代码来实现:

http_request.onreadystatechange=doHandler;

其中,onreadystatechange是XMLHttpRequest对象上的一个属性,整句代码的意思是"当服务器将数据返回后,将数据交给函数名为doHandler的函数负责处理".函数doHandler需要你单独编写.

1.3构建请求服务器地址和发送数据

服务器地址的构建是根据客户端的请求方式的不同而不同,如果客户端请求方式为post时,这时,地址和请求数据的构建是分离的.在前文的实例当中,我们是将数据发送到服务器端的一个叫做CheckAccountServlet来处理,那么请求地址和数据的构建如下:

var url = CheckAccountServlet;

var data = "name=zhangsan&password=123"

如果服务器端地址为/abc/cfg/CheckAccountServlet,那么这里就应该变成var url = abc/cfg/CheckAccountServlet,总之这里的地址是跟你所请求的服务器地址始终保持一致.

而对于请求方式为get时,这时,地址和请求数据一起来构建成一个完成的url.示例代码如下:

var url = "CheckAccountServlet?name=zhangsan&password=123"

在发送时,就将url直接以get方式发送到服务器上.

1.4连接服务器

就跟你操作db一样,在真正执行sql语句之前,你必须先跟db连接上.同样的,ajax要想发送数据则也需先跟服务器建立连接,建立连接代码如下

http_request.open(method,url,flag);

其中,method代表客户端请求方式,取值为post或者get

url代表服务器地址(具体构建方式见1.3)

flag取值为true或者false,如果为true表示只有和服务器建立连接成功后才执行发送数据,否则,相反(建议设置为true)

1.5.发送请求数据

如果请求方式为get,由于数据已经一并附加到url后面,所以,发送时直接调用http_request.send(null)即可.

如果请求方式为post,则需要将按照格式构建好的数据传递给send函数,并且在调用send函数前还需加上另外一个行代码,整个代码如下:

http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

http_request.send(data);


至此,客户端的处理已经宣告结束.剩下的就是服务器端的处理了

2.response-响应即服务器将响应数据发送回浏览器

我们再来看看在response方都需要做哪些事情呢?

2.1获取请求数据

跟你获取表单数据一样,获取ajax提交上来的数据也是采用request.getParameter()来实现

2.2处理请求数据

具体的数据处理就是你的事情了(做你想做的一切事情!)

2.3输出响应数据

要想把响应数据输出给客户端,只能通过输出流的方式来实现.

PrintWriter out = response.getWriter();//获取输出流

out.println("Some message");//开始输出响应数据

.......

out.close();//关闭输出流

这里,需要重点强调几点:

2.3.1.如果输出信息中包含中文,则需要在获取输出流之前添加response.setContentType("text/html;charset=gb2312");

2.3.2.设置让浏览器无缓存,添加response.setHeader("Cache-Control","no-cache");

2.3.3.输出信息只允许两种形式,分别是文本信息和xml格式的字符串信息.如果是文本信息,则按照前面的方式直接输出即可.如果是xml格式的字符串信息,则需要更改2.3.1.提到的代码response.setContentType ("text/html;charset=gb2312")为response.setContentType("text/xml;charset= gb2312")

至此,服务器端的响应信息已经输出完成(但我们的路还差最后一步哦,加点油,我们马上成功啦!!!)

2.4.客户端处理服务器返回的数据

那么,在哪来处理服务器返回的数据呢?还记得1.2提到的doHandler函数吗?

对了,doHandler函数就负责处理返回的数据的.来看看,它都做了哪些事情

/*具体负责处理服务器返回数据的函数*/
function doResponse(){
  //当服务器将数据返回给客户端时,readyState状态值为4

  if(http_request.readyState==4){
   //当服务器返回的数据是正常的数据时,status状态值为200
 
   if(http_request.status==200){
    //通过XMLHttpRequest对象的responseText属性获取
    //服务器返回的文本信息
       var returnMsg = http_request.responseText;
       //将响应信息显示到页面上
       showMessage(returnMsg);
   }

  }
}

这里的函数doResponse函数就是起到doHandler的作用(说过了嘛,doHandler函数名称可以任意取的嘛,别纠着函数名不放好不好).

关键的地方在于通过什么来获取服务器给我们返回的数据.XMLHttpRequest对象上提供两个属性供我们抉择.

2.4.1.responseText-如果服务器端返回的是普通的文本信息的话,用它就够了.

2.4.2.responseXML-如果服务器端返回的是xml格式的数据,则需要用它.而如果用它的话,那么就需要dom技术来解析其中的数据喽!(见下回分解)

大功告成,一切的一切都已经OK,请问,您酒醒了吗?