始创于2000年 股票代码:831685
咨询热线:0371-60135900 注册有礼 登录
  • 挂牌上市企业
  • 60秒人工响应
  • 99.99%连通率
  • 7*24h人工
  • 故障100倍补偿
您的位置: 网站首页 > 帮助中心>文章内容

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

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

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

一. PHP

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

  1. <?php  
  2. // set possibility to send response to any domain  
  3. header('Access-Control-Allow-Origin: *');  
  4. if (version_compare(phpversion(), '5.3.0''>=')  == 1)  
  5.   error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);  
  6. else 
  7.   error_reporting(E_ALL & ~E_NOTICE);   
  8. // accept POST params  
  9. $sAction = $_POST['action'];  
  10. $iParam1 = (int)$_POST['param1'];  
  11. $iParam2 = (int)$_POST['param2'];  
  12. // perform calculation  
  13. $iResult = 0;  
  14. switch ($sAction) {  
  15.     case 'sum':  
  16.         $iResult = $iParam1 + $iParam2;  
  17.         break;  
  18.     case 'sub':  
  19.         $iResult = $iParam1 - $iParam2;  
  20.         break;  
  21.     case 'mul':  
  22.         $iResult = $iParam1 * $iParam2;  
  23.         break;  
  24.     case 'div':  
  25.         $iResult = $iParam1 / $iParam2;  
  26.         break;  
  27. }  
  28. // prepare results array  
  29. $aResult = array(  
  30.     'result' => $iResult 
  31. );  
  32. // generate result  
  33. header('Content-type: application/json');  
  34. echo json_encode($aResult); 

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

二. JavaScript

api.js

  1. function do_sum(param1, param2, cfunction) {  
  2.     // send ajax response to server  
  3.     $.ajax({  
  4.         type: 'POST',  
  5.         url: 'http://www.script-tutorials.com/demos/301/api.php',  
  6.         crossDomain: true,  
  7.         dataType: 'json',  
  8.         data: 'action=sum¶m1=' + param1 + '¶m2=' + param2,  
  9.         success: function(json) {  
  10.             // and evoke client's function  
  11.             cfunction(json);  
  12.         }  
  13.     });  
  14. }  
  15. function do_sub(param1, param2, cfunction) {  
  16.  
  17.     // send ajax response to server  
  18.     $.ajax({  
  19.         type: 'POST',  
  20.         url: 'http://www.script-tutorials.com/demos/301/api.php',  
  21.         crossDomain: true,  
  22.         dataType: 'json',  
  23.         data: 'action=sub¶m1=' + param1 + '¶m2=' + param2,  
  24.         success: function(json) {  
  25.             // and evoke client's function  
  26.             cfunction(json);  
  27.         }  
  28.     });  
  29. }  
  30. function do_mul(param1, param2, cfunction) {  
  31.  
  32.     // send ajax response to server  
  33.     $.ajax({  
  34.         type: 'POST',  
  35.         url: 'http://www.script-tutorials.com/demos/301/api.php',  
  36.         crossDomain: true,  
  37.         dataType: 'json',  
  38.         data: 'action=mul¶m1=' + param1 + '¶m2=' + param2,  
  39.         success: function(json) {  
  40.             // and evoke client's function  
  41.             cfunction(json);  
  42.         }  
  43.     });  
  44. }  
  45. function do_div(param1, param2, cfunction) {  
  46.     // send ajax response to server  
  47.     $.ajax({  
  48.         type: 'POST',  
  49.         url: 'http://www.script-tutorials.com/demos/301/api.php',  
  50.         crossDomain: true,  
  51.         dataType: 'json',  
  52.         data: 'action=div¶m1=' + param1 + '¶m2=' + param2,  
  53.         success: function(json) {  
  54.             // and evoke client's function  
  55.             cfunction(json);  
  56.         }  
  57.     });  

这是对服务器端方法的 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,这是一个客户端可定制的任意函数用来处理服务器端返回的数据。

三. 使用方法 (客户端)

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

  1. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  2. <script src="http://www.script-tutorials.com/demos/301/api.js"></script>  
  3. <script type="text/javascript">  
  4. $(document).ready(function() {   
  5.     // execute method 1 (sum) by server  
  6.     var param1 = 5;  
  7.     var param2 = 10;  
  8.     do_sum(param1, param2, function(data) {  
  9.         $('#results').append(param1 + ' + ' + param2 + ' = ' + data.result + '  
  10. ');  
  11.         // execute method 2 (sub) by server  
  12.         param1 = 25;  
  13.         param2 = 15;  
  14.         do_sub(param1, param2, function(data) {  
  15.             $('#results').append(param1 + ' - ' + param2 + ' = ' + data.result + '  
  16. ');  
  17.             // execute method 3 (mul) by server  
  18.             param1 = 8;  
  19.             param2 = 5;  
  20.             do_mul(param1, param2, function(data) {  
  21.                 $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '  
  22. ');  
  23.  
  24.                 // execute method 4 (sub) by server  
  25.                 param1 = 33;  
  26.                 param2 = 11;  
  27.                 do_sub(param1, param2, function(data) {  
  28.                     $('#results').append(param1 + ' / ' + param2 + ' = ' + data.result + '  
  29. ');  
  30.                 });  
  31.             });  
  32.  
  33.         });  
  34.     });  
  35. });  
  36. </script>  
  37. <div id="results"></div> 

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

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

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


本文出自:亿恩科技【www.enkj.com】

服务器租用/服务器托管中国五强!虚拟主机域名注册顶级提供商!15年品质保障!--亿恩科技[ENKJ.COM]

  • 您可能在找
  • 亿恩北京公司:
  • 经营性ICP/ISP证:京B2-20150015
  • 亿恩郑州公司:
  • 经营性ICP/ISP/IDC证:豫B1.B2-20060070
  • 亿恩南昌公司:
  • 经营性ICP/ISP证:赣B2-20080012
  • 服务器/云主机 24小时售后服务电话:0371-60135900
  • 虚拟主机/智能建站 24小时售后服务电话:0371-60135900
  • 专注服务器托管17年
    扫扫关注-微信公众号
    0371-60135900
    Copyright© 1999-2019 ENKJ All Rights Reserved 亿恩科技 版权所有  地址:郑州市高新区翠竹街1号总部企业基地亿恩大厦  法律顾问:河南亚太人律师事务所郝建锋、杜慧月律师   京公网安备41019702002023号
      0
     
     
     
     

    0371-60135900
    7*24小时客服服务热线