ajax|js|資料
Ajax Hacks-hack7接收JSON格式的資料
怎樣才能使用Ajax從伺服器接收js對象資料呢?你可以使用一種叫javascript 對象符號的格式接收資料。本hack講述使用者輸入資訊,從伺服器得到JSON格式的響應資料。
JSON很普通而直觀,這也許是許多開發人員喜歡使用的原因吧。一個例子就是,伺服器程式從伺服器得到資訊,然後以JSON格式返回給web頁面。JSON格式的資料描述如下:
左大括弧“{”
一個或多個屬性名稱,以冒號隔開的對應的值,以逗號隔開的屬性/值對。
右大括弧 “}”
每個屬性的值可以是:
簡單的字串,例如 “hello”
數組,例如 [1,2,3,4]
數字
true, false, 或 null
其他對象,組合的,或者對象中還有對象。
詳細資料請訪問:http://www.json.org
在JavaScript中,對象的格式是嚴格的。作為一個例子,在hack2中的請求資訊改寫為JSON格式為:
{
firstname:“Bruce”,
lastname:“Perry”,
gender:“M”,
country:“USA”
}
Magic JSON
在這一部分裡,我們還使用hack2中的例子,只是處理的資料是JSON格式的資料。頁面的html代碼如下:
“http://www.w3.org/TR/1999/REC-html401–19991224/strict.dtd”>
A Few Facts About Yourself...
javascript:void%200>
First name:
Last name:
Gender:
Country of origin:
Send Data
指令碼標記引入的js檔案為hack5.js。JS將使用者輸入的值發送到伺服器;這些都已經在hack2等節介紹過了,這裡就不詳細解釋了。
當js處理傳回值的時候,需要注意XSS攻擊。這對於那些使用eval或其他相關函數來說是一個潛在的威脅。
作為一個相應的措施,在函數eval使用responseText之前,用戶端代碼可以過濾並檢測傳回值(即,通過檢查XMLHttpRequest responseText屬性)
下面是hack的代碼,我們將著重關注處理傳回值部分的代碼:
var request;
var queryString; //儲存POSTed 資料
function sendData( ){
setQueryString( );
url=“http://www.parkerriver.com/s/json”;
httpRequest(“POST”,url,true);
}
//event handler for XMLHttpRequest
function handleJson( ){
if(request.readyState == 4){
if(request.status == 200){
var resp = request.responseText;
var func = new Function(“return ”+resp);
var objt = func( );
var div = document.getElementById(“json”;
stylizeDiv(resp,div);
div = document.getElementById(“props”;
div.innerHTML=”
In object form...
"+
”
Properties
firstname= "+
objt.firstname "
lastname="
objt.lastname+ ”
gender="+
objt.gender+ ”
country="+
objt.country;
} else {
alert(“A problem occurred with communicating between ”+
“the XMLHttpRequest object and the server program.”;
}
}//end outer if
}
/* Initialize a request object that is already constructed */
function initReq(reqType,url,bool){
/* Specify the function that will handle the HTTP response */
request.onreadystatechange=handleJson;
request.open(reqType,url,bool);
request.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded; charset=UTF-8”;
request.send(queryString);
}
/* Wrapper function for constructing a request object.
Parameters:
reqType: The HTTP request type, such as GET or POST.
url: The URL of the server program.
asynch: Whether to send the request asynchronously or not. */
function httpRequest(reqType,url,asynch){
//Snipped… See Hack #1 or #2
}
function setQueryString( ){
queryString=“”;
var frm = document.forms[0];
var numberElements = frm.elements.length;
for(var i = 0; i < numberElements; i++){
if(i < numberElements-1){
queryString = frm.elements[i].name"="+
encodeURIComponent(frm.elements[i].value)+“&”;
} else {
queryString = frm.elements[i].name"="+
encodeURIComponent(frm.elements[i].value);
}
}
}
function stylizeDiv(bdyTxt,div){
//reset DIV content
div.innerHTML=“ ”;
div.style.fontSize=“1.2em”;
div.style.backgroundColor=“yellow”;
div.appendChild(document.createTextNode(bdyTxt));
}
如本章前面的hack介紹的,initReq( )函數初始化request對象並向伺服器發送HTTP請求。
事件處理函數將調用handleJson。相應資料的格式是JSON格式的字串,而不是其他的XML或其他格式的資料。JS將這些返迴文本看作string對象。因此,代碼啟動open步驟,在伺服器傳回值被轉化成js對象之前。(btw,在本節裡,伺服器在發送響應資料之前會將請求參數重新格式化成JSON格式。)
這裡沒有包括特定的錯誤處理代碼,而將其放在hack8中介紹。
在函數handleJson內的代碼(高亮顯示的部分),變數resp儲存HTTP響應文本,js將其看作string。令人感興趣的是函數的建構函式:
var func = new Function(“return ”+resp);
上面的代碼將建立一個新的函數對象,以變數func命名。JavaScript編程者應當明白,大多數函數需要在代碼中預先定義和聲明,或者作為函數字面量建立。然而,在本例中,我們需要使用一個字串動態定義一個函數體,並且函數的構造子能提供完美的工具。
Thanks to this site for guidance on this code usage: http://www.jibbering.com/2002/4/httprequest.html.
另一種轉換JSON字串的方法是:
var resp = request.responseText;var obj = eval( “(” resp ")" );
在使用eval和一個數組的時候,也可以不必使用圓括弧:
var resp = request.responseText;//resp 儲存的如 “[1,2,3,4]”
var arrObject = eval(resp);
接下來的行用來建立一個返回一個對象字面量的寒暑,來描述伺服器傳回值。然後可以調用函數並使用返回對象來使用DOM編程在web頁面動態顯示伺服器的返回結果。
var objt = func( );
var div = document.getElementById(“json”;
stylizeDiv(resp,div);
div = document.getElementById(“props”;
div.innerHTML=”
In object form...
Properties
firstname= "+
objt.firstname "
lastname="
objt.lastname+ ”
gender="+
objt.gender+ ”
country="+
objt.country;
objt變數來儲存物件字面量。變數可從對象中取得,形如objt.firstname。
Figure 1-10 shows what the web page looks like after it has received a response.
Figure 1-10. Visualizing JavaScript properties is sweet!
在伺服器端
java servlet用來處理請求。作為對伺服器端有更多的瞭解,下面是該servlet的doPost方法的代碼:
protected void doPost(HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse) throws
ServletException, IOException {
Map valMap = httpServletRequest.getParameterMap( );
StringBuffer body = new StringBuffer(“{\\n”;
if(valMap != null) {
String val=null;
String key = null;
Map.Entry me = null;
Set entries = valMap.entrySet( );
int size = entries.size( );
int counter=0;
for(Iterator iter= entries.iterator( );iter.hasNext( ) {
counter++;
me=(Map.Entry) iter.next( );
val= ((String[])me.getValue( ))[0];
key = (String) me.getKey( );
if(counter < size) {
body.append(key).append(“:\\““.append(val).append(“\\“,\\n”;
} else {
//remove comma for last entry
body.append(key).append(“:\\““.append(val).append(“\\“\\n”;
}
}
}
body.append(“}”;
AjaxUtil.sendText(httpServletResponse,body.toString( ));
}
AjaxUtil類發送HTTP響應以Content-Type of text/plain; charset=UTF-8的head。一些網站也有討論使用Content-Type,但是,在這裡,沒有固定的格式。
AjaxUtil 類設定了HTTP響應的頭格式:
response.setHeader("Cache-Control", "no-cache");
<