Ajax Hacks-Hack6 接收數字資料

ajax|資料 Ajax Hacks-Hack6 接收數字資料

本Hack以數字形式接收股票價格，然後和使用者輸入處理以後顯示出結果。如果伺服器沒有返回正確的數字，程式會顯示錯誤資訊。

Ajax技術的一個巨大進步就是從伺服器接收不連續的資料，而不是整個頁面。有時，這些不連續資訊不得不作為一個數字，而不是作為一個字串（就像上一個Hack講的那樣）或者其他對象。JavaScript能夠很容易的將其他各式的資料轉換成數字而不需要使用者的幹預，但儘管如此，使用者還是不想從伺服器得到一些奇怪的資料（需要格式檢查）。

本hack檢查使用者輸入的“股票的股數”的格式為一個正確的數字格式。然後從伺服器接收股票的價格。然後動態顯示出處理的結果。

Figure 1-6 瀏覽器顯示圖

Figure 1-6. 顯示總量

一下是頁面的HTML代碼：

“http://www.w3.org/TR/1999/REC-html401–19991224/strict.dtd”>

Your total Stock Holdings

javascript:void%200>
“getStockPrice(this.stSymbol.value,this.numShares.value);return false”>

Enter stock symbol:

Enter share amount:

Get Total Value

當使用者點擊Get Total Value按鈕，動作引發表單元素的提交事件。getStockPrice函數用來處理事件。函數取得股票符號以及股票數量作為參數。The return false part of the event-handling code cancels the browser’s typical submission of the form values to the URL specified by the form tag’s action attribute.

下面是hack4.js檔案的代碼：

var request;

var symbol; //儲存股票代號

var numberOfShares;

function getStockPrice(sym,shs){

if(sym && shs){

symbol=sym;

numberOfShares=shs;

var url=“http://www.parkerriver.com/s/stocks?symbol=”+sym;

　 httpRequest(“GET”,url,true);

}

}

//event handler for XMLHttpRequest

function handleResponse( ){

if(request.readyState == 4){

alert(request.status);

if(request.status == 200){

/* Check if the return value is actually a number.

If so, multiple by the number of shares and display the result */

var stockPrice = request.responseText;

try{

if(isNaN(stockPrice)) { throw new Error(

“The returned price is an invalid number.”;}

if(isNaN(numberOfShares)) { throw new Error(

“The share amount is an invalid number.”;}

var info = “Total stock value: ”+ calcTotal(stockPrice);

displayMsg(document.

getElementById(“msgDisplay“,info,“black”;

document.getElementById(“stPrice“.style.fontSize=“0.9em”;

document.getElementById(“stPrice“.innerHTML =”price:

”+stockPrice;

} catch (err) {

displayMsg(document.getElementById(“msgDisplay”,

“An error occurred: ”+

err.message,“red”;

}

} else {

alert(

“A problem occurred with communicating between the ”+

“XMLHttpRequest object and the server program.”;

}

}//end outer if

}

/* httpRequest( )和

initReq( ）函數 見hack1和2 */

function calcTotal(price){

return stripExtraNumbers(numberOfShares * price);

}

/* Strip any characters beyond a scale of four characters

past the decimal point, as in 12.3454678 */

function stripExtraNumbers(num){

//check if the number‘s already okay

//assume a whole number is valid

var n2 = num.toString( );

if(n2.indexOf(“.” == -1) { return num; }

//if it has numbers after the decimal point,

//limit the number of digits after the decimal point to 4

//we use parseFloat if strings are passed into the method

if(typeof num == “string”{

num = parseFloat(num).toFixed(4);

} else {

num = num.toFixed(4);

}

//strip any extra zeros

return parseFloat(num.toString( ).replace(/0*$/,“”);

}

function displayMsg(div,bdyText,txtColor){

//reset DIV content

div.innerHTML=“”;

div.style.backgroundColor=“yellow”;

div.style.color=txtColor;

div.innerHTML=bdyText;

}

資料處理以 handleResponse( )開始.首先代碼接收一個string，通過變數var stockPrice = request.responseText. 然後對變數stockPrice的格式進行檢查，使用的是js的函數isNaN(). js中使用這個函數進行相關檢查很常用。例如：isNaN("goodbye")返回true，因為"goodbye"不能轉換成數字。代碼也檢查了使用者輸入的股票數量的格式。

如果有函數返回true，表示有輸入值不合法，代碼會拋出異常。這就好像在說：無法處理這些值，請修改它們。然後頁面向使用者顯示錯誤。　

異常處理見hack8

calcTotal( )函數將兩個值乘起來，用以向使用者顯示結果。

使用文件物件模型，可以動態顯示結果，而不需要重新整理頁面。

displayMsg(document.getElementById("msgDisplay"),info,"black");

document.getElementById(“stPrice“.style.fontSize=“0.9em”;

document.getElementById(“stPrice“.innerHTML =“price: ”+stockPrice;

The displayMsg( ) function is also simple. It has a parameter that represents the font color, which allows the code to set the font color "red" for error messages:

function displayMsg(div,bdyText,txtColor){

//reset DIV content

div.innerHTML=“”;

div.style.backgroundColor=“yellow”;

div.style.color=txtColor;

div.innerHTML=bdyText;

}

Figure 1-7 shows what the page looks like when the user requests a stock value.

Figure 1-7. Tallying your investment

Figure 1-8 shows an example error message, in case the user enters values that cannot be used as numbers or the server returns invalid values.

Figure 1-8. Having a bad number day

<