跨域调用接口的方法之一：$.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>