jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個(gè)利用 XDomainRequest 對(duì)象為 IE8、IE9 實(shí)現(xiàn)跨域資源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件。
官方網(wǎng)址:https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest
約束:
1. 使用 $.ajax 發(fā)送請(qǐng)求,jQuery 版本需在 1.5+
2. 服務(wù)端需設(shè)置 header:header('Access-Control-Allow-Origin:http://angular.js');
3. 請(qǐng)求方式僅限:GET / POST
4. 協(xié)議僅限:HTTP / HTTPS,且必須相同
5. 僅限異步請(qǐng)求
經(jīng)驗(yàn):
服務(wù)端設(shè)置 header('Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS'); 時(shí),各瀏覽器跨域支持情況有差異。
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); });
更新說(shuō)明
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)用實(shí)例
代碼:
api.php:
<?php // 指定可信任的域名來(lái)接收響應(yīng)信息 header('Access-Control-Allow-Origin:http://angular.js'); // 允許攜帶 用戶認(rèn)證憑據(jù)(也就是允許客戶端發(fā)送的請(qǐng)求攜帶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)友的補(bǔ)充
IE8&IE9上不能使用XMLHttpRequest來(lái)通過(guò)cors來(lái)處理跨域,他們提供了一個(gè)特別的對(duì)象XDomainRequest來(lái)處理CORS跨域通訊。
可以參考:CORS
它的回掉函數(shù)和XMLHttpRequest基本一致,這里不重?cái)ⅰ?/p>
下面只要說(shuō)幾個(gè)坑點(diǎn):
1.要保持請(qǐng)求協(xié)議和當(dāng)前訪問(wèn)網(wǎng)站的協(xié)議一致。
例如:瀏覽器地址欄的協(xié)議是https,那么你的XDomainRequest只能發(fā)起https請(qǐng)求,否則“拒絕訪問(wèn)”
2. 如果你使用vue同時(shí)使用CORS,想要兼容IE8!不用多想了。
XDomainRequest是支持IE8 CORS的,但是vue不支持,這個(gè)鍋并不是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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
jQuery仿淘寶網(wǎng)產(chǎn)品品牌隱藏與顯示效果
這篇文章主要介紹了jQuery仿淘寶網(wǎng)產(chǎn)品品牌隱藏與顯示效果,通過(guò)jquery鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素的顯示與隱藏功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09jquery實(shí)現(xiàn)多條件篩選特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)多條件篩選特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery自動(dòng)切換/點(diǎn)擊切換選項(xiàng)卡效果的小例子
我們看到很多網(wǎng)站會(huì)有有錯(cuò)誤404頁(yè)面,當(dāng)頁(yè)面不存存時(shí)就會(huì)提示,然后過(guò)幾秒就會(huì)自動(dòng)跳到首頁(yè)了,下面我來(lái)給大家舉一個(gè)404錯(cuò)誤頁(yè)面跳到首頁(yè)實(shí)例,有需要的朋友可以參考一下2013-08-08jquery表單驗(yàn)證實(shí)例仿Toast提示效果
這篇文章主要介紹了jquery驗(yàn)證表單仿Toast提示效果,實(shí)現(xiàn)代碼簡(jiǎn)單易懂,非常不錯(cuò),需要的朋友可以參考下2017-03-03ztree簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
zTree 是利用 JQuery 的核心代碼,實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件,本文給大家簡(jiǎn)單介紹下ztree的基本知識(shí),感興趣的朋友一起看看吧2017-07-07