跨域調用接口的方法之一：$.ajaxSetup()

跨域查詢接口的數據，之前在公司時有發生過，產生的原因是，本地請求的域名或IP地址不一致，解除方法，也是修改域名和IP地址。比如：

接口中的數據來自IP地址：192.168.1.23/get.php

如果本地調用這個接口中的數據，必須要修改你的請求地址也同樣為 192.168.1.23/get.php

通常的做法是將接請求地址組合為一個對象和一個方法，通過調用這個方法來調用接口：

/*查詢接口*/

var config = {
    "protocol":"http",
    "server":"oliveche.com",
    "virtualDirectory":"quiz/api.php"
};

var getBaseUrl = function(){
    return config.protocol + "://" + config.server + "/" + config.virtualDirectory + "/";
}

 

最近在做一個筆記時，因為也是調用別人的接口，而產生了跨域，即使在本地更改了請求的域名或IP地址也不能直接使用 $.ajax({})中的get或post，會直接報跨域請求失敗，解決的辦法是使用 ：$.ajaxSetup()

首先了解一下這個方法 $.ajaxSetup()，為所有 AJAX 請求設置默認 URL 和 success 函數，它的語法是：

jQuery.ajaxSetup( settings )

什么意思呢？settings 是一個對象，其中的每個屬性表示需要更改默認設置的選項，而它的屬性值表示更改后的默認值：

//需要更改的屬性：更改后的默認值
key : value

下面是我使用$.ajaxSetup()的使用示例方法：

$(function(){
    //查詢方法
    searchData();
});

function searchData(){
    $.ajaxSetup({
        url: getBaseUrl() + "Quiz.get",    // 默認URL
        type: "GET" ,      // 默認使用GET方式
        success:function(result){     //result 是查詢接口中返回的數據
            //你的數據邏輯方法
        },
        error:function(){}
    });
　　//這里調用$.ajax()方法時，已經被$.ajaxSetup中的屬性 success 返回了正確的結果
    $.ajax();
}

下面是官方文檔中摘抄到的示例方法：

//設置AJAX的全局默認選項
$.ajaxSetup( {
    url: "/index.html" , // 默認URL
    aysnc: false , // 默認同步加載
    type: "POST" , // 默認使用POST方式
    headers: { // 默認添加請求頭
        "Author": "CodePlayer" ,
        "Powered-By": "CodePlayer"
    } ,
    error: function(jqXHR, textStatus, errorMsg){ // 出錯時默認的處理函數
        // jqXHR 是經過jQuery封裝的XMLHttpRequest對象
        // textStatus 可能為： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能為： "Not Found"、"Internal Server Error"等

        // 提示形如：發送AJAX請求到"/index.html"時出錯[404]：Not Found
        alert( '發送AJAX請求到"' + this.url + '"時出錯[' + jqXHR.status + ']：' + errorMsg );        
    }
} );


// 未設置任何參數，但url、async、type、headers、error等參數的默認值均已被$.ajaxSetup()更改(如上)
$.ajax( );


// 設置了url、type、success、error，就使用自己設置的參數值
// 但async、headers等參數的默認值已被$.ajaxSetup()更改
$.ajax( {
    url: "myurl.php?action=list" ,
    type: "GET" ,
    success: function( data, textStatus, jqXHR ){
        alert("返回數據：" + data);
    } ,
    error: function(jqXHR, textStatus, errorMsg){
        alert("自己的error!");        
    }
});

// 上述$.ajaxSetup()的默認設置對$.get()、$.post()、load()、$.getJSON()、$.getScript()等AJAX函數也生效
// 因為這些函數也是在內部調用$.ajax()函數來實現的，只不過它們在內部都設置了一些參數


// $.get()在內部調用$.ajax()時已設置type為"GET"，因此仍然使用GET方式。
// 但url、async、headers、error等參數的默認值已被$.ajaxSetup()更改
$.get( );


// $.post()在內部調用$.ajax()時已設置type為"POST"，因此仍然使用POST方式。
// url也被設置為"user/action.php?method=addUser"
// 但async、headers、error等參數的默認值已被$.ajaxSetup()更改
$.post( "user/action.php?method=addUser" );

總之，我們的目的是在使用$.ajax({})時不管使用get還是post，接口中的數據是不存在跨域的就OK。

需要注意的是用$.ajaxSetup函數所設置的默認值不會應用到load()命令上。對於實用工具函數，如$.get()和$.post()，其HTTP方法不會因為使用這些默認值而被覆蓋。設置GET的默認類型不會導致$.post()使用HTTP的GET方法。

<script type="text/javascript">
$().ready(function () {
　　var show = $('#show');
　　$('#selectNum').change(function () {
　　　　var idValue = $(this).val();
　　　　$.get('Server.aspx', { id: idValue }, function (data) { show.append(data+'<br/>'); });
　　});
 
　　$.ajaxSetup({
　　　　timeout: 3000,
　　　　dataType: 'html',
　　　　//請求成功后觸發
　　　　success: function (data) { show.append('success invoke!' + data + '<br/>'); },
　　　　//請求失敗遇到異常觸發
　　　　error: function (xhr, status, e) { show.append('error invoke! status:' + status+'<br/>'); },
　　　　//完成請求后觸發。即在success或error觸發后觸發
　　　　complete: function (xhr, status) { show.append('complete invoke! status:' + status+'<br/>'); },
　　　　//發送請求前觸發
　　　　beforeSend: function (xhr) {
　　　　//可以設置自定義標頭
　　　　xhr.setRequestHeader('Content-Type', 'application/xml;charset=utf-8');
　　　　show.append('beforeSend invoke!' +'<br/>');
　　　　},
　　})
})
</script>