以下為讀AJAX 網頁程式設計--Google成功背後的技術一書的筆記
AJAX基本原理
●AJAX之前
傳統作法,利用Form物件及CGI來重載畫面資訊。
form.html
<html>
<head>
<title>使用者查詢</title>
</head>
<body>
<form action="profile_form.php" method="POST">
請輸入姓名以供查詢:<input type="text"
name="user_name"><br>
<input type="submit" value="顯示個人資訊">
</form>
</body>
</html>
profile_form.php
<html>
<head>
<title>個人資料</title>
</head>
<body>
<h2>查詢對象 <?php echo $_REQUEST['user_name']; ?> 個人資料
</h2>
<table>
<?php
$files = glob("data/*.txt");
foreach ($files as $fname) {
$fp = fopen ($fname, "r");
$name = chop(fgets ($fp));
if (!strcmp($name, $_REQUEST['user_name'])) {
$sex = chop(fgets ($fp));
$age = chop(fgets ($fp));
fclose ($fp);
break;
}
fclose ($fp);
}
?>
<tr><td>姓名:<?php echo $name; ?></td></tr>
<tr><td>性別:<?php echo $sex; ?></td></tr>
<tr><td>年齡:<?php echo $age; ?></td></tr>
</table>
</body>
</html>
●使用iframe
利用了一個隱藏的iframe透過PHP查詢資料,當iframe載入完畢之後,所載入的頁面中會包含另外一段JavaScript程式碼,由它去呼叫原本頁面中的函式,並將資料顯示在同一個頁面上,如此便能達成非同步載入資料的目的。
iframe.html
<html>
<head>
<script language="javascript">
function loadComp(name, sex, age) {
document.getElementById('name_display').innerHTML = name;
document.getElementById('sex_display').innerHTML = sex;
document.getElementById('age_display').innerHTML = age;
document.getElementById('profile_query').src='';
}
function async_fetch() {
var iframe = document.getElementById ('profile_query');
// 指定 iframe 的網頁網址
iframe.src = "profile_iframe.php";
}
</script>
</head>
<body>
<input type="button" value="clickMe" onClick="async_fetch()">
<table>
<tr><td>姓名:</td><td><div id="name_display"></div></td>
</tr>
<tr><td>性別:</td><td><div id="sex_display"></div></td>
</tr>
<tr><td>年齡:</td><td><div id="age_display"></div></td>
</tr>
</table>
<iframe id="profile_query" style="display:none">
</iframe>
</body>
</html>
profile_iframe.php
<?php
$fp = fopen ("data/01.txt", "r");
$name = chop(fgets ($fp));
$sex = chop(fgets ($fp));
$age = chop(fgets ($fp));
fclose ($fp);
?>
<script type="text/javascript">
window.parent.loadComp('<?php echo $name; ?>', '<?php echo $sex; ?>', '<?php echo $age; ?>');
</script>
●AJAX三層架構
利用iframe達成非同步效果的缺點:
1.看起來不是漂亮的方法。
2.無法利用HTTP協定的POST來傳遞參數。
3.無法連結需要帳號密碼的網頁。
在AJAX中,其架構是三層的,在瀏覽器與伺服器間,加了AJAX引擎,其實AJAX引擎也是位於瀏覽器端,並不是真的介於瀏覽器與伺服器之間。
在AJAX的模式下,運作流程如下:
1.使用者對瀏覽器動作,如按下按鈕。
2.上述動作會被轉換成JavaScript的函式呼叫導給AJAX引擎。
3.AJAX引擎於背景去對伺服器發出HTTP要求,而在AJAX引擎動作的同時,這個JavaScript的函式呼叫其實已經回傳給呼叫者,故稱這個動作為非同步傳輸,而當AJAX引擎得到伺服器的HTTP回應時,AJAX引擎會再直接呼叫對應的函式通知瀏覽器在使用者介面上做出回應。
這樣的三層架構也可以對應到所謂的MVC架構(Model, View, Control)。
顯示層(View):負責利用圖形或是文字來呈現資料。(由瀏覽器負責)
控制層(Control):負責接收使用者的輸入。(由JavaScript負責)
模型層(Model):責責資料的處理,狀態的變化以及回饋顯示層或控制層。(由AJAX及CGI負責)
參考資料:AJAX 網頁程式設計--Google成功背後的技術
AJAX基本原理
●AJAX之前
傳統作法,利用Form物件及CGI來重載畫面資訊。
form.html
<html>
<head>
<title>使用者查詢</title>
</head>
<body>
<form action="profile_form.php" method="POST">
請輸入姓名以供查詢:<input type="text"
name="user_name"><br>
<input type="submit" value="顯示個人資訊">
</form>
</body>
</html>
profile_form.php
<html>
<head>
<title>個人資料</title>
</head>
<body>
<h2>查詢對象 <?php echo $_REQUEST['user_name']; ?> 個人資料
</h2>
<table>
<?php
$files = glob("data/*.txt");
foreach ($files as $fname) {
$fp = fopen ($fname, "r");
$name = chop(fgets ($fp));
if (!strcmp($name, $_REQUEST['user_name'])) {
$sex = chop(fgets ($fp));
$age = chop(fgets ($fp));
fclose ($fp);
break;
}
fclose ($fp);
}
?>
<tr><td>姓名:<?php echo $name; ?></td></tr>
<tr><td>性別:<?php echo $sex; ?></td></tr>
<tr><td>年齡:<?php echo $age; ?></td></tr>
</table>
</body>
</html>
●使用iframe
利用了一個隱藏的iframe透過PHP查詢資料,當iframe載入完畢之後,所載入的頁面中會包含另外一段JavaScript程式碼,由它去呼叫原本頁面中的函式,並將資料顯示在同一個頁面上,如此便能達成非同步載入資料的目的。
iframe.html
<html>
<head>
<script language="javascript">
function loadComp(name, sex, age) {
document.getElementById('name_display').innerHTML = name;
document.getElementById('sex_display').innerHTML = sex;
document.getElementById('age_display').innerHTML = age;
document.getElementById('profile_query').src='';
}
function async_fetch() {
var iframe = document.getElementById ('profile_query');
// 指定 iframe 的網頁網址
iframe.src = "profile_iframe.php";
}
</script>
</head>
<body>
<input type="button" value="clickMe" onClick="async_fetch()">
<table>
<tr><td>姓名:</td><td><div id="name_display"></div></td>
</tr>
<tr><td>性別:</td><td><div id="sex_display"></div></td>
</tr>
<tr><td>年齡:</td><td><div id="age_display"></div></td>
</tr>
</table>
<iframe id="profile_query" style="display:none">
</iframe>
</body>
</html>
profile_iframe.php
<?php
$fp = fopen ("data/01.txt", "r");
$name = chop(fgets ($fp));
$sex = chop(fgets ($fp));
$age = chop(fgets ($fp));
fclose ($fp);
?>
<script type="text/javascript">
window.parent.loadComp('<?php echo $name; ?>', '<?php echo $sex; ?>', '<?php echo $age; ?>');
</script>
●AJAX三層架構
利用iframe達成非同步效果的缺點:
1.看起來不是漂亮的方法。
2.無法利用HTTP協定的POST來傳遞參數。
3.無法連結需要帳號密碼的網頁。
在AJAX中,其架構是三層的,在瀏覽器與伺服器間,加了AJAX引擎,其實AJAX引擎也是位於瀏覽器端,並不是真的介於瀏覽器與伺服器之間。
在AJAX的模式下,運作流程如下:
1.使用者對瀏覽器動作,如按下按鈕。
2.上述動作會被轉換成JavaScript的函式呼叫導給AJAX引擎。
3.AJAX引擎於背景去對伺服器發出HTTP要求,而在AJAX引擎動作的同時,這個JavaScript的函式呼叫其實已經回傳給呼叫者,故稱這個動作為非同步傳輸,而當AJAX引擎得到伺服器的HTTP回應時,AJAX引擎會再直接呼叫對應的函式通知瀏覽器在使用者介面上做出回應。
這樣的三層架構也可以對應到所謂的MVC架構(Model, View, Control)。
顯示層(View):負責利用圖形或是文字來呈現資料。(由瀏覽器負責)
控制層(Control):負責接收使用者的輸入。(由JavaScript負責)
模型層(Model):責責資料的處理,狀態的變化以及回饋顯示層或控制層。(由AJAX及CGI負責)
參考資料:AJAX 網頁程式設計--Google成功背後的技術
全站熱搜
留言列表