Archive

Posts Tagged ‘Gmail’

[Ajax] 實作 Gmail 的載入訊息

五月 2nd, 2006
8 comments

進入 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>

PHP 部分：


<?php
$message = $_GET['message'];
sleep(2); // 睡一下吧,不然"載入中"會太快消失
echo strrev($message);
?>

Ajax, 程式筆記 , ,