一般我們使用瀏覽器提交新請求或者資料，都會重新整理頁面，比如在 WordPress 部落格中你要檢視下一頁的內容，需要重新整理頁面。 ajax 技術即可以實現非同步提交資料，使用 ajax，你可以不重新整理頁面也可以載入下一頁的內容。當然本篇教程並不是講解 ajax 技術的，如果你不會使用 ajax 技術，建議參考 w3school 的相關檔案：http://www.w3school.com.cn/ajax/。

ajax 原理很簡單，透過 js 提交請求，然後伺服器上處理請求，再輸出資料，瀏覽器接收資料，並顯示。所以 ajax 在網頁上需要 js 程式碼，我們一般使用 jquery 。在伺服器上需要處理請求的程式碼 (比如 php 程式) 。

以 ajax 翻頁，或者載入下一頁內容為例，大概流程為：1 、訪客在網頁上點選下一頁 (或者載入更多) 的連結 http://www.ashuwp.com/page/2，此時不重新整理頁面，而是透過 jquery 提交一個請求到伺服器，然後伺服器上處理這個請求，輸出內容，即將 http://www.ashuwp.com/page/2 的內容全部輸出，然後瀏覽器接受資料，然後從接受的資料中挑出文章內容 (因為輸出內容包含整個網頁的程式碼) 並顯示到相應的位置。

實現方法：

1 、準備網頁。

現在需要 ajax 翻頁翻頁的網頁上準備好下一頁的連結，如下是阿樹的下一頁程式碼，將連結放在一個 div 中，以便 js 選擇。

  1. <div class="post-read-more">  
  2.     <?php next_posts_link('更多+','');//下一頁的連結 ?>  
  3. </div>  

2 、準備 js 程式碼。

使用 jquery 非常方便，所以首先在網頁頭部載入 jquery 程式碼，我在主題底部檔案 footer.php 中載入 jqeury 。我將 jquery-1.7.2.min.js 放在了主題資料夾的 js 資料夾裡面，所以用 get_template_directory_uri() 函式來輸出主題的 url

  1. <script src="<?php echo get_template_directory_uri();?>/js/jquery-1.7.2.min.js"></script>   

然後我將發起 ajax 請求程式碼也放在了主題裡面 js 資料夾中的 ashu.js 檔案，所以再加上一個

  1. <script src="<?php echo get_template_directory_uri();?>/js/ashu.js"></script>   

然後是 ashu.js 中的程式碼：

  1. /**  
  2.  * by ashu.  
  3.  * URI: http://www.ashuwp.com  
  4.  */  
  5.   
  6. jQuery(document).ready(function($) {   
  7. //點選下一頁的連結 (即那個 a 標籤)   
  8. $('div.post-read-more a').click( function() {   
  9.     $this = $(this);   
  10.     $this.addClass('loading'); //給 a 標籤載入一個 loading 的 class 屬性，可以用來新增一些載入效果   
  11.     var href = $this.attr("href"); //獲取下一頁的連結地址   
  12.     if (href != undefined) { //如果地址存在   
  13.         $.ajax( { //發起 ajax 請求   
  14.             url: href, //請求的地址就是下一頁的連結   
  15.             type: "get", //請求型別是 get   
  16.   
  17.         error: function(request) {   
  18.             //如果發生錯誤怎麼處理   
  19.         },   
  20.         success: function(data) { //請求成功   
  21.             $this.removeClass('loading'); //移除 loading 屬性   
  22.             var $res = $(data).find(".post"); //從資料中挑出文章資料，請根據實際情況更改   
  23.             $('.posts-loop').append($res); //將資料載入加進 posts-loop 的標籤中。   
  24.             var newhref = $(data).find(".post-read-more a").attr("href"); //找出新的下一頁連結   
  25.             if( newhref != undefined ){   
  26.                 $(".post-read-more a").attr("href",newhref);   
  27.             }else{   
  28.                 $(".post-read-more").hide(); //如果沒有下一頁了，隱藏   
  29.             }   
  30.         }   
  31.         });   
  32.     }   
  33.     return false;   
  34. });   
  35.   
  36. });  

敬告：上面程式碼中，請求成功之後，瀏覽器要處理接受的資料，請根據實際情況更改，我的文章列表結構大概如下，所以我將所有 class 為 post 的 div 選出來，然後載入.posts-loop 中

  1. <div class="posts-loop">   
  2.     <div id="post-1" class="post"><!--第一篇文章--></div>   
  3.     <div id="post-2" class="post"><!--第二篇文章--></div>   
  4.     <div id="post-3" class="post"><!--第三篇文章--></div>   
  5.     <div id="post-4" class="post"><!--第四篇文章--></div>   
  6. </div>  

3 、瀏覽器對請求的處理

本例子中，並沒有單獨寫程式碼處理請求，因為我們的請求地址都是 www.ashuwp.com/page/2 之類的，這類請求 wp 預設就能處理，也會輸出相應的內容，所以不需要另外寫處理檔案。

當然，這種請求輸出的內容是整個網頁，跟普通的翻頁相比，使用 ajax 也並無速度之類的優勢，在接下來的教程中，我們將寫單獨特殊的 ajax 請求。