一般我們使用瀏覽器提交新請求或者數據，都會刷新頁面，比如在 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 請求。