为你的网址提供跨域支持的JavaScript API

ljmst

我相信很多人都尝试实现类似的方法，但可能会遇到很多困难，因为无法通过正常的 AJAX 请求来访问远程服务器并接收响应，这是因为浏览器的安全限制。下面我们将告诉你如何解决这个问题。

今天我们通过一个简单的例子来讲述如何创建支持跨域调用的 JavaScript API。我相信很多人都尝试实现类似的方法，但可能会遇到很多困难，因为无法通过正常的 AJAX 请求来访问远程服务器并接收响应，这是因为浏览器的安全限制。下面我们将告诉你如何解决这个问题。

完整的示例代码下载：source.zip

一. PHP

首先我们编写一个简单的服务端程序：

<?php  // set possibility to send response to any domain  
• header('Access-Control-Allow-Origin: *');  
• if (version_compare(phpversion(), '5.3.0', '>=')  == 1)  
    error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);  
• else
    error_reporting(E_ALL & ~E_NOTICE);   // accept POST params  
• $sAction = $_POST['action'];  
  $iParam1 = (int)$_POST['param1'];  
• $iParam2 = (int)$_POST['param2'];  
• // perform calculation  
  $iResult = 0;  
• switch ($sAction) {  
      case 'sum':  
•         $iResult = $iParam1 + $iParam2;  
          break;  
•     case 'sub':  
          $iResult = $iParam1 - $iParam2;  
•         break;  
      case 'mul':  
•         $iResult = $iParam1 * $iParam2;  
          break;  
•     case 'div':  
          $iResult = $iParam1 / $iParam2;  
•         break;  
  }  // prepare results array  
• $aResult = array(  
      'result' => $iResult
• );  
• // generate result  
  header('Content-type: application/json');  
• echo json_encode($aResult);
  

值得你关注的是第一行 PHP 代码中的自定义 HEAD ‘Access-Control-Allow-Origin’. 它允许发送回应到任意的服务器，甚至是不同域的。如果你要限制指定域名才能访问，也是在这里设置。接下来是简单的应用逻辑，接受参数并处理请求，这里我们实现的是最简单的加减乘除操作，返回的结果用 JSON 格式。

二. JavaScript

api.js

function do_sum(param1, param2, cfunction) {  
•     // send ajax response to server  
      $.ajax({  
•         type: 'POST',  
          url: 'http://www.script-tutorials.com/demos/301/api.php',  
•         crossDomain: true,  
          dataType: 'json',  
•         data: 'action=sum&para;m1=' + param1 + '&para;m2=' + param2,  
          success: function(json) {  
•             // and evoke client's function  
              cfunction(json);  
•         }  
      });  
• }  
  function do_sub(param1, param2, cfunction) {  
• 
      // send ajax response to server  
•     $.ajax({  
          type: 'POST',  
•         url: 'http://www.script-tutorials.com/demos/301/api.php',  
          crossDomain: true,  
•         dataType: 'json',  
          data: 'action=sub&para;m1=' + param1 + '&para;m2=' + param2,  
•         success: function(json) {  
              // and evoke client's function  
•             cfunction(json);  
          }  
•     });  
  }  
• function do_mul(param1, param2, cfunction) {  
  
•     // send ajax response to server  
      $.ajax({  
•         type: 'POST',  
          url: 'http://www.script-tutorials.com/demos/301/api.php',  
•         crossDomain: true,  
          dataType: 'json',  
•         data: 'action=mul&para;m1=' + param1 + '&para;m2=' + param2,  
          success: function(json) {  
•             // and evoke client's function  
              cfunction(json);  
•         }  
      });  
• }  
  function do_div(param1, param2, cfunction) {  
•     // send ajax response to server  
      $.ajax({  
•         type: 'POST',  
          url: 'http://www.script-tutorials.com/demos/301/api.php',  
•         crossDomain: true,  
          dataType: 'json',  
•         data: 'action=div&para;m1=' + param1 + '&para;m2=' + param2,  
          success: function(json) {  
•             // and evoke client's function  
              cfunction(json);  
•         }  
      });  
• }
  

这是对服务器端方法的 JS 封装，我准备了 4 个 JavaScript 方法，分别是 do_sum, do_sub, do_mul 和 do_div. 每个方法对应一个服务器的函数。一般来说，首先我们需要设置服务器 API 的 URL，这里是 http://www.script-tutorials.com/demos/301/api.php ，然后需要设置 crossDomain 为 true，最后设置数据格式为 json。请注意第三个参数是 cfunction，这是一个客户端可定制的任意函数用来处理服务器端返回的数据。

三. 使用方法 (客户端)

现在服务器端已经准备好了，接下来看看客户端如何使用这个远程接口。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
• <script src="http://www.script-tutorials.com/demos/301/api.js"></script>  
  <script type="text/javascript">  
• $(document).ready(function() {   
      // execute method 1 (sum) by server  
•     var param1 = 5;  
      var param2 = 10;  
•     do_sum(param1, param2, function(data) {  
          $('#results').append(param1 + ' + ' + param2 + ' = ' + data.result + '  
• ');  
          // execute method 2 (sub) by server  
•         param1 = 25;  
          param2 = 15;  
•         do_sub(param1, param2, function(data) {  
              $('#results').append(param1 + ' - ' + param2 + ' = ' + data.result + '  
• ');  
              // execute method 3 (mul) by server  
•             param1 = 8;  
              param2 = 5;  
•             do_mul(param1, param2, function(data) {  
                  $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '  
• ');  
  
•                 // execute method 4 (sub) by server  
                  param1 = 33;  
•                 param2 = 11;  
                  do_sub(param1, param2, function(data) {  
•                     $('#results').append(param1 + ' / ' + param2 + ' = ' + data.result + '  
  ');  
•                 });  
              });  
• 
          });  
•     });  
  });  
• </script>  
• <div id="results"></div>
  

在这个例子中，我们使用的是服务器端的 JavaScript  函数，我们将上面的代码简化后的结果就是：

var param1 = 5;  
• var param2 = 10;  
  do_sum(param1, param2, function(data) {  
•     $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '  
  ');  
• });
  

我们传递了三个参数，包括两个数字和一个函数引用，我们将在这个函数中接收到服务器的回应信息，然后可将它们显示出来。

结论

希望这个例子足够简单清晰，试试吧？

兔纸兄

求交易币