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

 更新时间:2023年06月18日 13:07:15   作者:七汐爱椰枣  
jQuery XDomainRequest 是一个利用 XDomainRequest 对象为 IE8、IE9 实现跨域资源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件

jQuery XDomainRequest 是一个利用 XDomainRequest 对象为 IE8、IE9 实现跨域资源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件。

官方网址:https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest

约束:

1. 使用 $.ajax 发送请求,jQuery 版本需在 1.5+
2. 服务端需设置 header:header('Access-Control-Allow-Origin:http://angular.js');
3. 请求方式仅限:GET / POST
4. 协议仅限:HTTP / HTTPS,且必须相同
5. 仅限异步请求

经验:

服务端设置 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

应用实例

代码:

api.php:

<?php
    // 指定可信任的域名来接收响应信息
    header('Access-Control-Allow-Origin:http://angular.js');
    // 允许携带 用户认证凭据(也就是允许客户端发送的请求携带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>

其它网友的补充

IE8&IE9上不能使用XMLHttpRequest来通过cors来处理跨域,他们提供了一个特别的对象XDomainRequest来处理CORS跨域通讯。

可以参考:CORS

它的回掉函数和XMLHttpRequest基本一致,这里不重叙。

下面只要说几个坑点:

1.要保持请求协议和当前访问网站的协议一致。

     例如:浏览器地址栏的协议是https,那么你的XDomainRequest只能发起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);
        });

到此这篇关于jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法的文章就介绍到这了,更多相关jQuery XDomainRequest内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • jQuery仿淘宝网产品品牌隐藏与显示效果

    jQuery仿淘宝网产品品牌隐藏与显示效果

    这篇文章主要介绍了jQuery仿淘宝网产品品牌隐藏与显示效果,通过jquery鼠标事件实现页面元素的显示与隐藏功能,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • jquery实现多条件筛选特效代码分享

    jquery实现多条件筛选特效代码分享

    这篇文章主要介绍了jquery实现多条件筛选特效,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • JQuery事件冒泡和默认行为代码实例

    JQuery事件冒泡和默认行为代码实例

    这篇文章主要介绍了JQuery事件冒泡和默认行为代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • Jquery 实现grid绑定模板

    Jquery 实现grid绑定模板

    这篇文章主要介绍了Jquery 实现grid绑定模板的相关资料,需要的朋友可以参考下
    2015-01-01
  • jQuery自动切换/点击切换选项卡效果的小例子

    jQuery自动切换/点击切换选项卡效果的小例子

    我们看到很多网站会有有错误404页面,当页面不存存时就会提示,然后过几秒就会自动跳到首页了,下面我来给大家举一个404错误页面跳到首页实例,有需要的朋友可以参考一下
    2013-08-08
  • jqGrid用法汇总(全经典)

    jqGrid用法汇总(全经典)

     jqGrid可以绑定XML,JSON和数组三种类型的数据。接下来通过本文给大家介绍jqGrid用法的相关知识,感兴趣的朋友一起学习吧
    2016-06-06
  • jqueryMobile使用示例分享

    jqueryMobile使用示例分享

    这里是本人学习jQuery Mobile的过程,现在将学习过程中的实例一一展现出来,希望能帮到更多的新手。本系列中实例都经过了本人的亲自测试。
    2016-01-01
  • jQuery EasyUI开发技巧总结

    jQuery EasyUI开发技巧总结

    这篇文章主要介绍了jQuery EasyUI开发技巧总结的相关资料,希望通过本文大家能够掌握EasyUI的开发技巧,需要的朋友可以参考下
    2017-09-09
  • jquery表单验证实例仿Toast提示效果

    jquery表单验证实例仿Toast提示效果

    这篇文章主要介绍了jquery验证表单仿Toast提示效果,实现代码简单易懂,非常不错,需要的朋友可以参考下
    2017-03-03
  • ztree简介_动力节点Java学院整理

    ztree简介_动力节点Java学院整理

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件,本文给大家简单介绍下ztree的基本知识,感兴趣的朋友一起看看吧
    2017-07-07

最新评论