AJAX (Asynchronous JavaScript And XML)並不是一種程式語言，而是一種應用於瀏灠器 (Client)和Web Server (Server)之間的技術。這種技術的觀念非常容易理解：當我們要傳送一份網頁資料的時後，傳統的作法就是會把整個網頁都送到後端的網頁伺服器做分析，後端的程式再截取出想要的資訊。何謂整個網頁?? 就是<html>開頭，一直到</html>結束，這中間所有的東西，當然也包含了像<head>、<body>、<table>、<p>或是<br/>等這些標籤。假設我們有一份網頁的資料如下：
<input type="text" name="nmUsername" value=""/> <input type="password" name="nmPassword" value=""/>後端的網頁程式所需要的，就只有：username=(value)和password=(value)這兩樣而已，其餘的HTML Tag對伺服器而言，一點意義也沒有，而且還浪費傳輸頻寬。所以，AJAX這樣的技術就應運而生。Google在2005年的時後就開始大力推廣這樣的技術。
這一篇文章要呈現的是：如何用JavaScript來建立一個AJAX的網頁。在這之前，有一些基礎知識是要被瞭解的，像由Browser發出的HTTP Request (請求)封包和Web Server回應的HTTP Response (回應)封包有那些內容?? 或是像Browser發出HTTP GET和HTTP POST的差異在那裡?? 除此之外，我們也還需要一些工具來輔助我們觀察這些HTTP Package的行為模式，像Mozilla FireFox的瀏灠器主控台和WireShark。至於HTTP Server也很簡單，只要能夠執行即可，我們並不需要撰寫任何的Server端程式；這邊自己以Linux平台為例：
service httpd status // 確認httpd Web Server的狀態
service httpd start // 啟動web server
這樣子就可以了!! 然後，把我們的demo網頁 (這裡我們命名為JavaScriptAjax.html)放進：/ var / www / html / 即可。
最後，我們再從瀏灠器查看我們剛剛建立的網頁，網頁的內容也很簡單，只要求使用者輸入帳號和密碼，傳送到後端的伺服器。
JavaScriptAjax.html的內容如下：
<!DOCUMENT HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript and AJAX Chaptet 17</title>
<script language="JavaScript" type="text/javascript">
var g_strUri = function() {
var strTemp = window.location.protocol + "//" + window.location.host;
if (window.location.port)
strTemp += ":" + window.location.port;
return strTemp;
};
var request = function()
{
var i = -1;
var activexmodes = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
if (window.ActiveXObject) {
for (i = 0; i < activexmodes.length; i++) {
try {
return new ActiveXObject(activexmodes[i]);
}
catch (e) {
//suppress error
}
}
}
else if (window.XMLHttpRequest)
return new XMLHttpRequest();
else {
alert("Don't create any ActiveXObject / XMLHttpRequest!! \n");
return false;
}
}
function AjaxTest(FLAG)
{
var ajaxRequest = new request();
var strUsername = document.forms[0].nmUsername.value;
var strPassword = document.forms[0].nmPassword.value;
var strUri = g_strUri() + "/JavaScriptAjax.html";
var strData = "nmUsername=" + strUsername + "&nmPassword=" + strPassword;
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4) {
if (ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) {
//document.getElementById("ajax-ServerBack").innerHTML = ajaxRequest.responseText;
document.getElementById("ajax-ServerBack").innerHTML = "AJAX: Success!! ";
}
else
alert((FLAG == 0)? "GET:": "POST:" + " An error has occured making the request");
}
}
if (FLAG == 0) { // GET
ajaxRequest.open("GET", strUri + "?" + strData, true);
ajaxRequest.send(null);
}
else { // POST
ajaxRequest.open("POST", strUri, true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.send(strData);
}
}
</SCRIPT>
</head>
<body>
<center>
<form action="" method="">
<h2>Hello, AJAX!!</h2><hr width="30%">
<table width="30%" border="0">
<tr>
<td align="right">Username:</td>
<td align="left">
<input type="text" name="nmUsername" value=""/>
</td>
</tr>
<tr>
<td align="right">Password:</td>
<td align="left">
<input type="password" name="nmPassword" value=""/>
</td>
</tr>
<tr><td colspan="2">
<center><br/>
<input type="button" value="GET" OnClick="AjaxTest(0);"/>
<input type="button" value="POST" OnClick="AjaxTest(1);"/>
</center>
</td></tr>
</table>
<br/>
<div id="ajax-ServerBack"></div>
</center>
</form>
</center>
</body>
</html>
自己很懶，同一份Code裡同時都有GET和POST的功能，我們就可以順便觀察這兩種行為有何不同。關於程式碼解說的部份，就留在下一次。
(To be continue....)
沒有留言:
張貼留言