Ajax的通信方式

       在请求页面中new一个Ajax对象让它向服务器端发送一个请求，并且在请求完成的时候调用一个方法其中用eva l()方法来解释返回的对象，这样做所有的工作行为都是由服务器端通过对页面DOM的调用来完成的，使服务器端代码非常复杂。

sample1：

客户端部分代码

...

window.οnlοad=function(){

 $('helloBtn').οnclick=function(){

  var name=$('helloTxt').value;

  new Ajax.Request(

   "服务器端请求URI"，

   {

     method:"get",

     onComplete:function(xhr){

      eva l(xhr.responseText);

}});};};

...

服务器端代码(jsp)

<jsp:directive.page contentType="test/javascript">

<%

 String name=request.getParameter(name);

%>

document.getElementByIdx('helloTitle').innerHTML=

"<h1>Hello,</h1>"+name;

 

改良版的数据传递方法：

改良以后的Ajax在客户端代码中添加了一个方法来部署服务器发出的数据，这样服务器的任务变成，只需要将调用这个函数得信息和参数发送给客户端就行了，参数的处理都由客户端完成，大大减少了服务器的代码量和运算量。

sample2:

客户端部分代码

...

window.οnlοad=function(){

 $('helloBtn').οnclick=function(){

  var name=$('helloTxt').value;

  new Ajax.Request(

   "服务器端请求URI"，

   {

     method:"get",

     onComplete:function(xhr){

      eva l(xhr.responseText);

}});};};

function updateName(name){

 $('helloTitle').innerHTML="<h1>Hello,</h1>"+name;

}

...

服务器端代码(jsp)

<jsp:directive.page contentType="test/javascript">

<%

 String name=request.getParameter(name);

%>

updateName("<%= name%>")

 

使用JSON往返传输数据：

JSON简介

JSON是一个轻量级的数据交换格式，各种不同的服务器端技术及JavaScript本身都可以很容易的生成和解析JSON。作为一个完整的数据交换格式，它可以在活动对象和用于交换的格式之间进行双向转译。

JSON对象生成的数据转化为字符串形势是如下这个形式的 {"key":"value",...}，在客户端，我们可以通过JSON.stringify({key:value}),然后通过JSON.parse(xhr.respinsesText)将接收到的相应转换成对象。在服务器端我们可以实例化net.sf.json.JSONObject类，接受客户端的数据并装入服务器端回复客户端的数据，回传，达到c-s之间交互数据的目的。需要注意的是JSONObject需要载入json-lab jar包，同时还需要jakarta commons-lang 2.4 ,jakarta commons-beanutils 1.7.0 ,jakarta commons-collections 3.2 ,jakarta common-logging 1.1.1 ,ezmorph 1.0.6这些包的支持。一下是实现通信的部分代码：

sample3:

客户端部分代码

...

window.οnlοad=function(){

 $('helloBtn').οnclick=function(){

  var name=$('helloTxt').value;

  new Ajax.Request(

   "服务器端请求URI"，

   {

     postBody:JSON.stringify({name:name}),

     onComplete:function(xhr){

      var responseObj = JSON.parse(xhr.responseText);

      pudate(responseObj);

}});};};

function update(object){

 $('helloTitle').innerHTML="<h1>Hello,</h1>"+object.name;

}

...

服务器端代码(jsp)

<jsp:directive.page contentType="application/javascript" import="java.util.*,net.sf.json.*">

<%

 JSONObject jsonObject=JSONObject.fromObject();

 String name=request.getParameter(name);

%>

<%=jsonObject%>