网页编程/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>