終於練功練成
我的第一支以 Ajax 方式寫的程式可以上線了!!
透過 XMLHttpRequest 這個好幫手 (Firefox 內建物件, IE 則要透過 ActiveXObject("Microsoft.XMLHTTP"))
就可以以非同步的方式去將後端查到的資料 Show 在使用者查詢的文件上
並且透過 Cache 的機制, 可以快速的與後端進行溝通
Ajax(Asynchronous JavaScript+CSS+DOM+XMLHttpRequest) 不是一項新的技術, 而是一種 Web 2.0 時代的新的開發方式, 由 Jesse James Garrett 於 2005 年2 月所提出的一個新的名詞.
如果您使用過 Google Suggests 或 Google Maps, 您一定對於網頁可以這樣使用的方式眼睛為之一亮.
根據 Jesse 的定義
Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
· standards-based presentation using XHTML and CSS;
· dynamic display and interaction using the Document Object Model;
· data interchange and manipulation using XML and XSLT;
· asynchronous data retrieval using XMLHttpRequest;
· and JavaScript binding everything together.
XHTML 是以 XML 的撰寫方式來編寫 HTML 網頁(也就是 Tag 的寫法要求比較嚴謹)
CSS 是美化網頁所不可或缺的東西
DOM(Document Object Model) 則是 Browser 解析網頁的物件模型, 也就是 DHTML(Dynamic HTML)的核心
新的東西只有 XMLHttpRequest 這一個物件, 伴隨 IE 5.x 之後所提供的一個物件呼叫模式(其實就是 Microsoft.XMLHTTP 這個 Dll), Firefox 則是內建在 Browser 物件中
所有上述的東西, 最後透過 Javascript 把它組合在一起
讓你瀏覽網頁時, 不再需要不斷的 refresh 以取得最新的資料, 而是類似 Windows Application 一般以一個畫面就可以完成所有的事.
Gmail 就是一個很好的例子.
我的第一支程式就是讓 Sales 能夠查詢客戶的信用評等資料, 以判斷是否爭取客戶的信用額度.
公司的徵信人員定期將上市/櫃公司的財報資料鍵入後端系統
業務人員在網頁上輸入客戶代號/客戶名稱, 即可取得各季的徵信資訊
在網頁瀏覽上, 完全沒有 refresh 的動作
只有一個簡單的輸入欄位與查詢按鈕
使用者按下查詢鈕後, XMLHttpRequest 去 request 相對應的 JSP 程式, 透過後端 JSP 分頁技術將資料處理好時, 會將資料以 XML Data Stream 的方式傳回前端(此動作是背景處理, 使用者感覺不出來)
前端透過 DOM 將資料展示在所設定的位置, 並且將資料 Cache
這樣使用者就可以很快速的更新資料(幾乎沒有停頓)
原始碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<meta http-equiv="Content-Language" content="zh-tw" />
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/AjaxService.js"></script>
<title>公司信用評等查詢系統</title>
<script type="text/javascript">
var ajaxobj=new AjaxService();
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<meta http-equiv="Content-Language" content="zh-tw" />
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/AjaxService.js"></script>
<title>公司信用評等查詢系統</title>
<script type="text/javascript">
var ajaxobj=new AjaxService();
function query(page,cust_code) {
// This demo uses simple Html/JS only, so we load a static html page
$('result').innerHTML="載入中...";
var url = "/Authority/auth_all.jsp?page="+page;
var url1 = "/Authority/auth_cust.jsp?cust_code="+cust_code;
//var callback = processAjaxResponse;
ajaxobj.executeXhr((cust_code=="") ? url : url1);
}
</script>
</head>
<link rel="stylesheet" href="/css/styles.css" type="text/css">
<body>
<form name="frmQuery" method="post">
<table width="100%" border="0" cellspacing="2" cellpadding="2" style="border: solid 1px; padding-left:10px;">
<tr>
<td>請輸入客戶代碼/客戶簡稱</td>
<td><input type="text" name="cust_code" size="20" /></td>
<td><input type="button" value="查詢" onclick="query(1,frmQuery.cust_code.value)" /></td>
</tr>
</table>
</form>
<p>
<div id="result">
</div>
</p>
// This demo uses simple Html/JS only, so we load a static html page
$('result').innerHTML="載入中...";
var url = "/Authority/auth_all.jsp?page="+page;
var url1 = "/Authority/auth_cust.jsp?cust_code="+cust_code;
//var callback = processAjaxResponse;
ajaxobj.executeXhr((cust_code=="") ? url : url1);
}
</script>
</head>
<link rel="stylesheet" href="/css/styles.css" type="text/css">
<body>
<form name="frmQuery" method="post">
<table width="100%" border="0" cellspacing="2" cellpadding="2" style="border: solid 1px; padding-left:10px;">
<tr>
<td>請輸入客戶代碼/客戶簡稱</td>
<td><input type="text" name="cust_code" size="20" /></td>
<td><input type="button" value="查詢" onclick="query(1,frmQuery.cust_code.value)" /></td>
</tr>
</table>
</form>
<p>
<div id="result">
</div>
</p>
</body>
</html>
</html>
藍色字 <div id="result"></div> 即是資料顯示的地方
James Jan的檔案
張貼留言