超簡單 Ajax 範例

Ajax

超簡單 Ajax 範例。

撰寫Ajax及Ajax執行流程

  1. HTML網頁:
    可送出資料的按鈕(或超鏈結...),顯示資料的<div>區塊(<span>也可以,或是文字框)並附上ID。
  2. 建立XMLHttpRequest物件:
    使用Javascript 判別支援XMLHttpRequest物件的瀏覽器。(此步驟是因為不同的瀏覽器,XMLHttpRequest物件名稱不同)
  3. 送出資料:
    使用Javascript 將資料送給網頁伺服器。
  4. 回送資料:
    網頁伺服器(此範例採用PHP撰寫伺服端程式)取得資料後送回給HTML網頁。
  5. 處理並顯示:
    使用Javascript處理取得的資料,並使用DOM改變網頁頁面將資料呈現。

傳統模型與Ajax模型

(圖片來源:http://www.adaptivepath.com/ideas/essays/archives/000385.php)

Clien端程式碼(HTML + JavaScript)

(流程1, 3, 5)
<html>
<head>
<title>Hello~ Ajax</title>
<script type="text/javascript" src="creatRequestObj.js"> </script>
<script language="javascript" type="text/javascript">
//create XMLHttpRequest Object
var request = null;
request = creatRequestObj();
if (request == null){
//無法取得XMLHttpRequest物件時發出警告
alert("Error creating request object!");
}

//Send data to Server
function sendData() {
var url = "ajax.php";
request.open("GET", url, true);//開啟連線,選擇連線方式GET,POST
request.onreadystatechange = updatePage;//狀態完成時所要執行的函式
request.send(null);//送出
}

function updatePage() {
if (request.readyState == 4) {//完成狀態有好幾種,4代表資料傳回完成
var data = request.responseText;//取得傳回的資料存在變數中<

//更新文字框中的值
var txt = document.getElementById("data");
txt.value = data;

//以下的部份會把html中id為show的元素清除,然後再加入資料
var el = document.getElementById("show");
var newNode = document.createTextNode(data);
//clear nodes
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var childNode = el.childNodes[i];
el.removeChild(childNode);
}
}
el.appendChild(newNode);
}
}
</script>
</head>

<body>
<h1>Hello~ Ajax</h1>
<form method="GET">
<input type="text" id="data" />
<input value="Get Number" type="button" onClick="sendData();" />
</form>

<h2><div id="show"> </div></h2>
</body>
</html>

creatRequestObj.js程式碼:

(流程2)
/*功能:依不同的瀏覽器使用各自的XMLHttpRequest物件*/

function creatRequestObj(){
var request = null;
try {
//IE7,or non-IE browser
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
//IE browser
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
//other IE browser
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
//not support
request = null;
}
}
}
return request;
}

Server端程式碼:ajax.php

(流程4)
<?php
$num = 1000 + rand(0,1000);
echo $num;
?>
php的部份,我做了很大的簡化,只單純傳回一個數字。實際上的狀況,應該是連線資料庫,取得所需的資料,使用XML格式回傳。再由HTML網頁這邊拆解這個XML來取得資料。

Ajax和傳統submit整個表單,並傳回一個html網頁最大的不同是,它只傳回「資料」,也就是不含版面結構(html元素)。
本文網址:http://blog.tonycube.com/2009/03/ajax.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。