在請求頁面中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%>