文章內(nèi)容

為你的網(wǎng)址提供跨域支持的JavaScript API

發(fā)布時(shí)間: 2012/8/28 15:29:17

天我們通過一個(gè)簡(jiǎn)單的例子來(lái)講述如何創(chuàng)建支持跨域調(diào)用的 JavaScript API。我相信很多人都嘗試實(shí)現(xiàn)類似的方法，但可能會(huì)遇到很多困難，因?yàn)闊o(wú)法通過正常的 AJAX 請(qǐng)求來(lái)訪問遠(yuǎn)程服務(wù)器并接收響應(yīng)，這是因?yàn)闉g覽器的安全限制。下面我們將告訴你如何解決這個(gè)問題。

完整的示例代碼下載：source.zip

一. PHP

首先我們編寫一個(gè)簡(jiǎn)單的服務(wù)端程序：

<?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);

值得你關(guān)注的是第一行 PHP 代碼中的自定義 HEAD ‘Access-Control-Allow-Origin’. 它允許發(fā)送回應(yīng)到任意的服務(wù)器，甚至是不同域的。如果你要限制指定域名才能訪問，也是在這里設(shè)置。接下來(lái)是簡(jiǎn)單的應(yīng)用邏輯，接受參數(shù)并處理請(qǐng)求，這里我們實(shí)現(xiàn)的是最簡(jiǎn)單的加減乘除操作，返回的結(jié)果用 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¶m1=' + param1 + '¶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¶m1=' + param1 + '¶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¶m1=' + param1 + '¶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¶m1=' + param1 + '¶m2=' + param2,  
        success: function(json) {  
            // and evoke client's function  
            cfunction(json);  
        }  
    });  
}

這是對(duì)服務(wù)器端方法的 JS 封裝，我準(zhǔn)備了 4 個(gè) JavaScript 方法，分別是 do_sum, do_sub, do_mul 和 do_div. 每個(gè)方法對(duì)應(yīng)一個(gè)服務(wù)器的函數(shù)。一般來(lái)說(shuō)，首先我們需要設(shè)置服務(wù)器 API 的 URL，這里是 http://www.script-tutorials.com/demos/301/api.php ，然后需要設(shè)置 crossDomain 為 true，最后設(shè)置數(shù)據(jù)格式為 json。請(qǐng)注意第三個(gè)參數(shù)是 cfunction，這是一個(gè)客戶端可定制的任意函數(shù)用來(lái)處理服務(wù)器端返回的數(shù)據(jù)。

三. 使用方法 (客戶端)

現(xiàn)在服務(wù)器端已經(jīng)準(zhǔn)備好了，接下來(lái)看看客戶端如何使用這個(gè)遠(yuǎn)程接口。

<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>

在這個(gè)例子中，我們使用的是服務(wù)器端的 JavaScript 函數(shù)，我們將上面的代碼簡(jiǎn)化后的結(jié)果就是：

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