網頁程式設計/AJAX

資源

每個 Web 應用程式至少包含兩個部分：客戶端和伺服器端。客戶端在瀏覽器中執行，充當 Web 應用程式的使用者介面。伺服器端在伺服器上執行，允許應用程式實現業務邏輯並訪問各種資源，例如檔案系統、資料庫或其他服務。客戶端和伺服器端之間的互動以請求和響應的形式進行。傳統上，請求是在使用者在位址列中輸入新 URL 或單擊頁面時觸發的。對請求的響應將是一個新頁面。在新頁面到達之前，使用者沒有任何可互動的內容。這種延遲可能是由網路延遲或伺服器問題造成的，這些問題很難控制。為了提供良好的使用者體驗，我們的應用程式應始終保持互動性。為了響應每個請求而重新整理整個頁面效率很低，因為通常只需要更新頁面的一小部分。

AJAX 代表非同步 JavaScript 和 XML。它不是一種新的程式語言，而是一種使用 JavaScript 以非同步方式在客戶端和伺服器端之間交換資料的新方法。AJAX 基於標準，包括 XMLHttpRequest 物件、使用 JavaScript 進行 DOM 操作以及 XML 和 JSON。

以下是在 JQuery 中常用的幾種 AJAX 方法。該 load() 方法從伺服器載入資料並將返回的資料放入選定的元素中。AJAX get() 和 post() 方法使用相應的 HTTP 請求型別傳送請求。

以下示例展示了我們使用 AJAx 修改後的 TODO 列表示例。

<html>
<head>
  <title>Add a TODO</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    // load the todo list
    $("#list").load("list.php?delay=10");
    
    $(document).ajaxStart(function() {
      $("#loader").show();
    });
    $(document).ajaxStop(function(){
      $("#loader").hide();
    })

    $("button").click(function(){
      $.get("add_submit.php",
      { 
        todo: $('#todo').val(),
        delay: 10
      },
      function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
        $("#list").empty();
        $("#list").append(data);
      })
    });

  });

</script>
</head>
<body>
<label>TODO:<input type="text" id="todo"/></label>
<button>Add</button><br/>
<img id="loader" width="50px" height="50px" src="ajax_loader.gif"/>
<div id="list"></div>
</body>
</html>

請注意，客戶端使用 JavaScript 程式碼來載入 todo 列表併發送新增新列表項的請求。PHP 指令碼作為伺服器端透過提供 Web API 來接收請求。每個 PHP 指令碼都可以被視為一個函式，它為每個引數組合返回資料。伺服器指令碼如下所示

<?php
/* add_submit.php */
$todo = $_REQUEST["todo"];
$delay = $_REQUEST["delay"];

if (!isset($delay)){
  $delay = 0;
}

sleep($delay);

if (strlen(trim($todo)) != 0){ 
  file_put_contents("todolist.txt", $todo."\n", FILE_APPEND);
  $lines = file("todolist.txt");
?>
<li><?=array_pop($lines)?><a href="delete.php?line_number=<?=count($lines)-1?>">[x]</li>
<?php  
}
?>

<ul>
      <?php
           /* list.php */
	    $delay = $_REQUEST['delay'];
        if (!isset($delay)){
          $delay=0;
        }
        sleep($delay);
    	$todos = file("todolist.txt", FILE_IGNORE_NEW_LINES); 
        #print_r( $todos);
        $count = count($todos);
        for ($i=0; $i<$count; $i++){
      ?>
          <li><?=$todos[$i]?>
			[<a href="delete.php?line_number=<?=$i?>">x</a>]</li>
      <?php
        }
      ?>
</ul>