JavaScript如何實現(xiàn)跨域請求
什么是跨域請求?
簡單的理解就是向不在同一個域名的服務器文件發(fā)出請求。這個還是用實際的例子來說明一下吧,比如baidu.com向cxyblog.com發(fā)送請求,這兩個域名是不同的,那么這就是跨域了,出于安全性的考慮,這樣是不允許的。另外需要注意的是不同子域名或者同域名不同端口之間或者相同域名不同協(xié)議等發(fā)送的請求也都算是跨域的,基本上可以為歸為下面幾類:
(1)http://www.baidu.com向http://www.cxyblog.com發(fā)送請求
(2)http://www.cxyblog.com向http://image.cxyblog.com發(fā)送請求
(3)http://www.baidu.com:8000向http://www.cxyblog.com發(fā)送請求
(4)http://www.cxyblog.com向https://www.cxyblog.com發(fā)送請求
(5)http://www.cxyblog.com向http://112.65.242.67發(fā)送請求(假設域名www.cxyblog.com所對應的IP是112.65.242.67)
以上五種情況都算是跨域請求。
什么時候會用到跨域請求?
有時候我們需要使用Javascript進行Ajax操作的時候會碰到這種跨域請求操作的問題。
為什么直接使用javascript不能實現(xiàn)跨域請求?
由于安全的原因,javacript同源策略的限制,瀏覽器不允許Javascript請求跨域的資源。
如何解決javascript不能實現(xiàn)跨域請求的問題?
本文用到的解決方法是使用FlyJSONP應用JSONP實現(xiàn)跨域請求。FlyJSONP是一個輕量級的JavaScript類庫,也被稱作JSON插件,壓縮后總大小約為3KB,不需要其他框架的支撐。
FlyJSONP官網(wǎng)地址:http://alotaiba.github.com/FlyJSONP/
那么該如何使用FlyJSONP類庫實現(xiàn)跨域請求呢?
(1)首先要加載FlyJSONP的Javascript腳本,即:
<script language="javascript" src="http://www.cxyblog.com/flyjsonp.min.js"></script>
(2)然后要初始化FlyJSONP的實例,參數(shù)debug可設置為true或false,即:FlyJSONP.init({debug: true}),這個參數(shù)的意思就是是否打開調試信息,參數(shù)值為true或者false;
(3)接下里就是使用get方法或post方法請求數(shù)據(jù)了,具體實例代碼如下:
//FlyJSONP實現(xiàn)跨域GET function getData(){ FlyJSONP.init({debug:true});//初始化FlyJSONP的實例,參數(shù)debug可設置為true或false FlyJSONP.get({ url:'http://www.cxyblog.com/article.json',//目標請求的URL parameters:{//請求參數(shù) limit:5 }, success:function(data){//發(fā)送請求成功 console.log(data); }, error:function(errorMsg){//發(fā)送請求失敗 console.log(errorMsg); } }); } //FlyJSONP實現(xiàn)跨域POST function postData(){ FlyJSONP.init({debug:true});//初始化FlyJSONP的實例,參數(shù)debug可設置為true或false FlyJSONP.post({ url:'http://www.cxyblog.com/article/new', parameters:{ username:'cxyblog', api_key:'123456', title:'FlyJSONP', description:'test' }, success:function(data){ alert(data); } }); }
注意:服務端輸出給客戶端時,輸出的必須是json字符串,否則客戶端無法接收。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript實現(xiàn)原生ajax的幾種方法介紹
項目中不需要加載jquery這種龐大的js插件要使用到ajax這種功能該如何辦呢?下面和大家分享幾種利用javascript實現(xiàn)原生ajax的方法2013-09-09JavaScript實現(xiàn)異步任務循環(huán)順序執(zhí)行詳解
這篇文章主要為大家詳細介紹了JavaScript中實現(xiàn)異步任務循環(huán)順序執(zhí)行的方法,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下2023-03-03