以下為讀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成功背後的技術

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()