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%>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章