AJax 技術是目前網頁流行的趨勢,在工作上也時常運用此技術.那什麼是 AJax 呢?節錄一段 WIKI 上的 AJax 文章如下:
AJAX全稱為「Asynchronous JavaScript and XML」(非同步JavaScript和XML),是一種創建互動式網頁應用的網頁開發技術。根據Ajax提出者Jesse James Garrett建議[1],它:
- 使用XHTML+CSS來表示資訊;
- 使用JavaScript操作DOM(Document Object Model)進行動態顯示及互動;
- 使用XML和XSLT進行資料交換及相關操作;
- 使用XMLHttpRequest物件與Web伺服器進行非同步資料交換;
- 使用JavaScript將所有的東西繫結在一起。
- 使用SOAP以XML的格式來傳送方法名和方法參數。
第一種:JavaScript 嵌入 HTML 中的作法,有下列兩種模式
A: <script type="text/javascript"> .code </script>
B: <script type="text/javascript" src="url"></script>
建議使用 B 為宜,因為這樣程式碼分離,閱讀及 Debug 都較為方便.
第二種:搭配 XHTML,若是搭配嚴謹的XHTML格式則必須使用 cdata 將 JavaScript 用註解格式封裝
<script type="“text/javascript”">
<![CDATA[//>
<!— Javascript Code here … //-->
<!]]>
</script>
AJAX 處理的順序大致可以分成下列五個步驟
1.Create the object : XMLHttpRequest
2.Set the readystatechange event trigger
3.Open the Request
4.Send the Request
5.Check the readyState property
整個架構圖如下:
下面就舉實例來說明 AJax 這五個步驟,在這個實例中需要兩個檔案 AJax.html & HelloAjax.txt,透過 AJax.html 是來取得網站內 HelloAjax.txt 檔案裡的資料。
AJax.html 檔案
<html>
<head>
<script type='text/javascript'>
var myXmlHttp;
function createXmlHttpObj(){
if(window.XMLHttpRequest) {
myXmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
myXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function handleStateChange(){
var txtresp;
var xmlresp;
if(myXmlHttp.readyState == 4) {
if(myXmlHttp.status == 200) {
//以純文字方式取回伺服器回傳資料
txtresp = myXmlHttp.responseText;
//以 XML 方式取回伺服器回傳資料
xmlresp = myXmlHttp.responseXML;
//5.Check the readyState property
if (txtresp) {
document.getElementById("myTxtResp").innerHTML = txtresp;
}
}
}
}
function sendRequest(){
// 1.Create the object : XMLHttpRequest
createXmlHttpObj();
if(myXmlHttp) {
// 2.Set the readystatechange event trigger
myXmlHttp.onreadystatechange = handleStateChange;
// 3.Open the Request
myXmlHttp.open('get', 'HelloAjax.txt');
// 4.Send the Request
myXmlHttp.send(null);
}else {
alert("您的瀏覽器不支援這個Ajax程式的功能");
}
}
</script>
</head>
<body>
<input value="click me(介紹 AJax 的功能)" onclick="sendRequest();" type="button"><br>
<a href="#" onClick="sendRequest();" >click me(介紹 AJax 的功能)</a>
<div id="myTxtResp"></div>
</body>
</html>
HelloAjax.txt 檔案
Hello AJax
這是由 AJax 技術取得伺服器後端 HelloAjax.txt 的檔案資料
參考:
沒有留言:
張貼留言