五月2
[Ajax] 實作 Gmail 的載入訊息
進入 Gmail、Calendar 等 Google 的服務，時常會看到右上角有個紅底白字的「載入中…」，拿來當第一個 Ajax 的練習。
基本作法就是利用一個 DIV 區塊，預設為不顯示，等到呼叫 JavaScript 建立 XMLHttpRequest 時，將 DIV 區塊設為顯示，最後等伺服器後端傳回訊息時再隱藏區塊即可。這個範例是使用者輸入訊息，由 PHP 處理並顛倒字串印出。
Demo
網頁部分：
<!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="Content-Type" content="text/html; charset=big5" />
<title>Ajax Test</title>
<script type="text/javascript">
var ajax;
function createHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
function ajaxSendRequest(url) {
var msg = document.getElementById('msg').value;
document.getElementById('loading').style.display = "block";
ajax = createHttpRequest();
ajax.onreadystatechange = showResult;
ajax.open("GET", url + '?message=' + msg);
ajax.send("");
}
function showResult() {
if (ajax.readyState == 4 && ajax.status == 200) {
document.getElementById('loading').style.display = "none";
document.getElementById('echo_msg').innerHTML = ajax.responseText;
}
}
</script>
<style type="text/css">
#loading {
position: absolute;
width: 50px;
height: 20px;
line-height: 20px;
top: 5px;
right: 5px;
font-size: 12px;
background-color: #C44;
color: #FFF;
text-align: center;
}
</style>
</head>
<body>
<div id="loading" style="display:none">載入中...</div>
請輸入英文訊息：<input type="text" id="msg" /><br />
<div id="echo_msg"></div>
<input type="submit" id="Submit" value="送出" onclick="ajaxSendRequest('echo.php')" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Ajax Test</title>
<script type="text/javascript">
var ajax;
function createHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
function ajaxSendRequest(url) {
var msg = document.getElementById('msg').value;
document.getElementById('loading').style.display = "block";
ajax = createHttpRequest();
ajax.onreadystatechange = showResult;
ajax.open("GET", url + '?message=' + msg);
ajax.send("");
}
function showResult() {
if (ajax.readyState == 4 && ajax.status == 200) {
document.getElementById('loading').style.display = "none";
document.getElementById('echo_msg').innerHTML = ajax.responseText;
}
}
</script>
<style type="text/css">
#loading {
position: absolute;
width: 50px;
height: 20px;
line-height: 20px;
top: 5px;
right: 5px;
font-size: 12px;
background-color: #C44;
color: #FFF;
text-align: center;
}
</style>
</head>
<body>
<div id="loading" style="display:none">載入中...</div>
請輸入英文訊息：<input type="text" id="msg" /><br />
<div id="echo_msg"></div>
<input type="submit" id="Submit" value="送出" onclick="ajaxSendRequest('echo.php')" />
</body>
</html>
PHP 部分：
<?php
$message = $_GET['message'];
sleep(2); // 睡一下吧,不然"載入中"會太快消失
echo strrev($message);
?>
$message = $_GET['message'];
sleep(2); // 睡一下吧,不然"載入中"會太快消失
echo strrev($message);
?>
[...] 憂藍夢境‧部落格 » [Ajax] 實作 Gmail 的載入訊息 (tags: Tech WebDev AJAX) [...]
我试了哟，不错啊！
你是台湾的朋友？
是的
歡迎多來參觀^^
問一個問題，請問有辦法讓IE在傳送中文字串的時候，不會變成亂碼嗎?
網頁、跟輸出結果的php都已經設定成UTF-8編碼了，可是還是變成亂碼哩orz
不過Firefox就不會有這個問題 囧rz
to 筆筆：
您是指使用 Ajax 在傳遞中文字會出現亂碼嗎？
試試PHPRPC :)
試了, 真是很好。好想學習AJAX
可以怎樣學好呢?
有AJAX後，想達到同步功能，就不需要Socket ?
感恩大大 我是一個超級初學者
我試過了 可是用到自己的網頁
卻叫不出來ajaxSendRequest
難道使用form action叫不出來附程式嗎~”"~
懇請大大解決我的疑惑…