快捷導(dǎo)航

jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法

更新時間：2023年06月18日 13:07:15 作者：七汐愛椰棗

jQuery XDomainRequest 是一個利用 XDomainRequest 對象為 IE8、IE9 實現(xiàn)跨域資源共享（CORS - Cross Origin Resource Sharing）的 jQuery 插件

jQuery XDomainRequest 是一個利用 XDomainRequest 對象為 IE8、IE9 實現(xiàn)跨域資源共享（CORS - Cross Origin Resource Sharing）的 jQuery 插件。

官方網(wǎng)址：https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest

約束：

1. 使用 $.ajax 發(fā)送請求，jQuery 版本需在 1.5+
2. 服務(wù)端需設(shè)置 header：header('Access-Control-Allow-Origin:http://angular.js');
3. 請求方式僅限：GET / POST
4. 協(xié)議僅限：HTTP / HTTPS，且必須相同
5. 僅限異步請求

經(jīng)驗：

服務(wù)端設(shè)置 header('Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS'); 時，各瀏覽器跨域支持情況有差異。

With at least jQuery version 1.5, just include the jquery.xdomainrequest.min.js script into your page, then make your AJAX call like you normally would:

// GET
$.getJSON('http://jsonmoon.jsapp.us/').done(function(data) {
  console.log(data.name.first);
});
// POST
$.ajax({
  url: 'http://frozen-woodland-5503.herokuapp.com/cors.json',
  data: 'this is data being posted to the server',
  contentType: 'text/plain',
  type: 'POST',
  dataType: 'json'
}).done(function(data) {
  console.log(data.name.last);
});

更新說明

1.0.2 - added RequireJS AMD module support

1.0.3 - added CommonJS and Bower support

1.0.4 - support protocol-relative URLs, use peerDependencies in package.json

應(yīng)用實例

代碼：

api.php:

<?php
    // 指定可信任的域名來接收響應(yīng)信息
    header('Access-Control-Allow-Origin:http://angular.js');
    // 允許攜帶 用戶認證憑據(jù)（也就是允許客戶端發(fā)送的請求攜帶Cookie）
    header('Access-Control-Allow-Credentials:true');
    //header('Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS');
    //header('Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With, Accept, x-csrf-token, origin');
    $type = $_SERVER['REQUEST_METHOD'];
    parse_str(file_get_contents('php://input'), $data);
    $data = array_merge($_GET, $_POST, $data);
    echo json_encode(array(
        'type' => $type,
        'data' => $data['data']
    ));
?>

ajax.html:

<script src="http://libs.cncdn.cn/jquery/1.11.1/jquery.min.js"></script>
<script src="http://libs.cncdn.cn/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
<script>
  $.ajax({
    url: 'http://ndol.cn/api.php',
    data: {
      'data': 'zhao'
    },
    type: 'POST',
    dataType: 'json'/*,
    xhrFields:{
      withCredentials:true
    }*/
  }).done(function(data) {
    alert(JSON.stringify(data));
  });
  //alert($.support.cors);
</script>

其它網(wǎng)友的補充

IE8&IE9上不能使用XMLHttpRequest來通過cors來處理跨域，他們提供了一個特別的對象XDomainRequest來處理CORS跨域通訊。

可以參考:CORS

它的回掉函數(shù)和XMLHttpRequest基本一致，這里不重敘。

下面只要說幾個坑點:

1.要保持請求協(xié)議和當前訪問網(wǎng)站的協(xié)議一致。

例如：瀏覽器地址欄的協(xié)議是https，那么你的XDomainRequest只能發(fā)起https請求，否則“拒絕訪問”

2. 如果你使用vue同時使用CORS，想要兼容IE8！不用多想了。

XDomainRequest是支持IE8 CORS的，但是vue不支持，這個鍋并不是XDomainRequest的，XDomainRequest不背(●'?'●)。

貼代碼：

return new Promise((resolve, reject) => {
            let appliance = new window.XDomainRequest()
            appliance.onprogress = function () { }; // no aborting
            appliance.ontimeout = function () {
               // alert("timeout")
                reject({ eror: "timeout" });
            }; // "
            appliance.onload = function (e) {
                // do something with appliance.responseText
               // alert("onload" + appliance.responseText)
                resolve(appliance.responseText);
            };
            appliance.onerror = function (e, b) {
                // error handling
               // alert("error" + JSON.stringify(e) + JSON.stringify(b))
                reject({ eror: e });
            };
            //appliance.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            appliance.withCredentials = true; // to support sending cookies with CORS
            appliance.open("POST", axios.defaults.baseURL + url);
            appliance.send(dataToString);
        });

到此這篇關(guān)于jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法的文章就介紹到這了,更多相關(guān)jQuery XDomainRequest內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！