天我们通过一个简单的例子来讲述如何创建支持跨域调用的 JavaScript API。我相信很多人都尝试实现类似的方法,但可能会遇到很多困难,因为无法通过正常的 AJAX 请求来访问远程服务器并接收响应,这是因为浏览器的安全限制。下面我们将告诉你如何解决这个问题。
完整的示例代码下载:source.zip
一. PHP
首先我们编写一个简单的服务端程序:
- <?php
-
- 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);
-
- $sAction = $_POST['action'];
- $iParam1 = (int)$_POST['param1'];
- $iParam2 = (int)$_POST['param2'];
-
- $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;
- }
-
- $aResult = array(
- 'result' => $iResult
- );
-
- 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) {
-
- $.ajax({
- type: 'POST',
- url: 'http://www.script-tutorials.com/demos/301/api.php',
- crossDomain: true,
- dataType: 'json',
- data: 'action=sum¶m1=' + param1 + '¶m2=' + param2,
- success: function(json) {
-
- cfunction(json);
- }
- });
- }
- function do_sub(param1, param2, cfunction) {
-
-
- $.ajax({
- type: 'POST',
- url: 'http://www.script-tutorials.com/demos/301/api.php',
- crossDomain: true,
- dataType: 'json',
- data: 'action=sub¶m1=' + param1 + '¶m2=' + param2,
- success: function(json) {
-
- cfunction(json);
- }
- });
- }
- function do_mul(param1, param2, cfunction) {
-
-
- $.ajax({
- type: 'POST',
- url: 'http://www.script-tutorials.com/demos/301/api.php',
- crossDomain: true,
- dataType: 'json',
- data: 'action=mul¶m1=' + param1 + '¶m2=' + param2,
- success: function(json) {
-
- cfunction(json);
- }
- });
- }
- function do_div(param1, param2, cfunction) {
-
- $.ajax({
- type: 'POST',
- url: 'http://www.script-tutorials.com/demos/301/api.php',
- crossDomain: true,
- dataType: 'json',
- data: 'action=div¶m1=' + param1 + '¶m2=' + param2,
- success: function(json) {
-
- 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() {
-
- var param1 = 5;
- var param2 = 10;
- do_sum(param1, param2, function(data) {
- $('#results').append(param1 + ' + ' + param2 + ' = ' + data.result + '
- ');
-
- param1 = 25;
- param2 = 15;
- do_sub(param1, param2, function(data) {
- $('#results').append(param1 + ' - ' + param2 + ' = ' + data.result + '
- ');
-
- param1 = 8;
- param2 = 5;
- do_mul(param1, param2, function(data) {
- $('#results').append(param1 + ' * ' + param2 + ' = ' + data.result + '
- ');
-
-
- 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 + '
- ');
- });
我们传递了三个参数,包括两个数字和一个函数引用,我们将在这个函数中接收到服务器的回应信息,然后可将它们显示出来。 本文出自:亿恩科技【www.enkj.com】
服务器租用/服务器托管中国五强!虚拟主机域名注册顶级提供商!15年品质保障!--亿恩科技[ENKJ.COM]
|