Ajax Hacks-hack7接收JSON格式的資料

來源:互聯網
上載者:User
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");

<

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.