编辑“WordPress在插件中使用AJAX”（章节）

==访问者页面上的Ajax==
在访问者所浏览的WordPress网页上使用[[Ajax]]与在WordPress后台使用Ajax略有不同。这是因为WordPress本身不存在内置的访问者页面Ajax，但这并不重要，接下来我们会介绍怎样在访问者页面上使用Ajax。如果要在WordPress后台上使用Ajax，可以忽略这部分内容。

在这个示例中我们假设目前有一个插件，网站/[[博客]]访问者可以对某项内容投票或评分。这可以是一个投票插件、日志评分插件或者其它类似插件。我们希望达到的效果是：通过Ajax提交访问者的投票，这样访问者就不需要等待页面刷新；投票被计入结果后，更新显示当前投票总数。为方便起见，我们假设投票和显示结果都是基于文本的，并且假设我们已经编辑了主题或用WordPress过滤器函数或动作函数在WordPress访问者页面适当的位置上添加了HTML代码。所添加的代码内容如下：

 <form>
 Your vote: <input type="text" name="uservote" />
 <input type="button" value="Vote!" onclick="myplugin_cast_vote(this.form.uservote,'voteresults');" />
 < div id="voteresults">
 (previous results output from your [[PHP]] function)
 </div>
 </form>
接下来我们需要定义Javascript函数 myplugin_cast_vote，而OnClick动作函数则会读取用户输入的信息，用SACK生成一个请求，然后将请求发送给插件进行处理。我们在简介中提到，这个Javascript函数和SACK库都需要被包含在访问者浏览页面的HTML代码的head版块中。我们可以利用wp_head动作钩子函数（当然也可以使用条件标签is_xyz()中的某些函数）将JavaScript函数添加到所有访问者浏览页面中：
 add_action('wp_head', 'myplugin_js_header' );
 function myplugin_js_header() // this is a PHP function
 {
  // use JavaScript SACK library for Ajax
  wp_print_scripts( array( 'sack' ));
  // Define custom JavaScript function 
 ?>
 <script type="text/javascript">
 //<![CDATA[
 function myplugin_cast_vote( vote_field, results_div )
 {
    // function body defined below
 } // end of JavaScript function myplugin_cast_vote
 //]]>
 </script>
 <?php
 } // end of PHP function myplugin_js_header

之后需要填写JavaScript函数myplugin_cast_vote的主体部分，该部分需要能够从表单域中读取投票信息，用SACK生成一个Ajax请求，然后将请求发送给服务器。在这个例子中，我们需要设置以下信息：

*请求[[URL]]：我们要将请求发送到某个插件PHP文件中，可能是插件主PHP文件，也可能是独立[[PHP]]文件。在独立PHP文件中发送请求相对方便。为方便叙述，我们假设这个独立PHP文件名是"myplugin_ajax.php"，位于WordPress标准目录wp-content/plugins中。 
*自定义请求变量：在这个例子中我们只需要发送投票信息和div的ID（返回的结果将进入服务器）。 
整合所有信息后，JavaScript函数的主体显示如下：

 function myplugin_cast_vote( vote_field, results_div )
 {
   var mysack = new sack( 
      "<?php bloginfo( 'wpurl' ); ?>/wp-content/plugins/myplugin_ajax.php" );    
  mysack.execute = 1;
  mysack.method = 'POST';
  mysack.setVar( "vote", vote_field.value );
  mysack.setVar( "results_div_id", results_div );
  mysack.onError = function() { alert('Ajax error in voting' )};
  mysack.runAJAX();
  return true;
 } // end of JavaScript function myplugin_cast_vote

接下来是最后一步——对Ajax请求到达服务器时的反应进行定义。这将会在myplugin_ajax.php文件中完成，该文件读取已提交的投票信息，确认投票的有效性，将投票信息存入[[数据库]]，统计最新投票结果，最终将统计信息返回[[浏览器]]。如果暂时不考虑投票的处理过程，myplugin_ajax.php文件中应包含以下信息：

 <?php
 // Put your author and license information here
 // TO DO!
 // Check request came from valid source here
 // TO DO!
 // read submitted information
 $vote = $_POST['vote'];
 $results_id = $_POST['results_div_id'];
 // Put your vote processing code here
 // In this example, assume 
 //  a) The processing code sets global
 // variable $error to a message if there is an error
 //  b) If there is no error, $results contains
 // the [[HTML]] to put into the results DIV on the screen
 if( $error ) {
   die( "alert('$error')" );
 } 
 // Compose JavaScript for return
 die( "document.getElementById('$results_id').innerHTML = '$results'" );
 ?>
OK！这时我们还需要加入一些细节内容，像是[[Ajax]]请求是否来自正确地址的检查和验证等，希望大家能够通过这个例子对WordPress访问者页面上的Ajax用法有基本了解。
说明	输入内容	输出结果
斜体	''斜体文字''	斜体文字
粗体	'''粗体文字'''	粗体文字
粗斜体	'''''粗斜体文字'''''	*粗斜体文字*