JavaScript如何實(shí)現(xiàn)跨域請(qǐng)求
什么是跨域請(qǐng)求?
簡(jiǎn)單的理解就是向不在同一個(gè)域名的服務(wù)器文件發(fā)出請(qǐng)求。這個(gè)還是用實(shí)際的例子來(lái)說(shuō)明一下吧,比如baidu.com向cxyblog.com發(fā)送請(qǐng)求,這兩個(gè)域名是不同的,那么這就是跨域了,出于安全性的考慮,這樣是不允許的。另外需要注意的是不同子域名或者同域名不同端口之間或者相同域名不同協(xié)議等發(fā)送的請(qǐng)求也都算是跨域的,基本上可以為歸為下面幾類:
(1)http://www.baidu.com向http://www.cxyblog.com發(fā)送請(qǐng)求
(2)http://www.cxyblog.com向http://image.cxyblog.com發(fā)送請(qǐng)求
(3)http://www.baidu.com:8000向http://www.cxyblog.com發(fā)送請(qǐng)求
(4)http://www.cxyblog.com向https://www.cxyblog.com發(fā)送請(qǐng)求
(5)http://www.cxyblog.com向http://112.65.242.67發(fā)送請(qǐng)求(假設(shè)域名www.cxyblog.com所對(duì)應(yīng)的IP是112.65.242.67)
以上五種情況都算是跨域請(qǐng)求。
什么時(shí)候會(huì)用到跨域請(qǐng)求?
有時(shí)候我們需要使用Javascript進(jìn)行Ajax操作的時(shí)候會(huì)碰到這種跨域請(qǐng)求操作的問(wèn)題。
為什么直接使用javascript不能實(shí)現(xiàn)跨域請(qǐng)求?
由于安全的原因,javacript同源策略的限制,瀏覽器不允許Javascript請(qǐng)求跨域的資源。
如何解決javascript不能實(shí)現(xiàn)跨域請(qǐng)求的問(wèn)題?
本文用到的解決方法是使用FlyJSONP應(yīng)用JSONP實(shí)現(xiàn)跨域請(qǐng)求。FlyJSONP是一個(gè)輕量級(jí)的JavaScript類庫(kù),也被稱作JSON插件,壓縮后總大小約為3KB,不需要其他框架的支撐。
FlyJSONP官網(wǎng)地址:http://alotaiba.github.com/FlyJSONP/
那么該如何使用FlyJSONP類庫(kù)實(shí)現(xiàn)跨域請(qǐng)求呢?
(1)首先要加載FlyJSONP的Javascript腳本,即:
<script language="javascript" src="http://www.cxyblog.com/flyjsonp.min.js"></script>
(2)然后要初始化FlyJSONP的實(shí)例,參數(shù)debug可設(shè)置為true或false,即:FlyJSONP.init({debug: true}),這個(gè)參數(shù)的意思就是是否打開調(diào)試信息,參數(shù)值為true或者false;
(3)接下里就是使用get方法或post方法請(qǐng)求數(shù)據(jù)了,具體實(shí)例代碼如下:
//FlyJSONP實(shí)現(xiàn)跨域GET function getData(){ FlyJSONP.init({debug:true});//初始化FlyJSONP的實(shí)例,參數(shù)debug可設(shè)置為true或false FlyJSONP.get({ url:'http://www.cxyblog.com/article.json',//目標(biāo)請(qǐng)求的URL parameters:{//請(qǐng)求參數(shù) limit:5 }, success:function(data){//發(fā)送請(qǐng)求成功 console.log(data); }, error:function(errorMsg){//發(fā)送請(qǐng)求失敗 console.log(errorMsg); } }); } //FlyJSONP實(shí)現(xiàn)跨域POST function postData(){ FlyJSONP.init({debug:true});//初始化FlyJSONP的實(shí)例,參數(shù)debug可設(shè)置為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); } }); }
注意:服務(wù)端輸出給客戶端時(shí),輸出的必須是json字符串,否則客戶端無(wú)法接收。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery $.getJSON()跨域請(qǐng)求
- 跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
- Javascript跨域請(qǐng)求的4種解決方式
- AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法
- 借助script進(jìn)行Http跨域請(qǐng)求:JSONP實(shí)現(xiàn)原理及代碼
- 使用$.getJSON實(shí)現(xiàn)跨域ajax請(qǐng)求示例代碼
- ajax跨域請(qǐng)求js拒絕訪問(wèn)的解決方法
- js跨域請(qǐng)求的5中解決方式
- JSONP跨域GET請(qǐng)求解決Ajax跨域訪問(wèn)問(wèn)題
- 通過(guò)jquery的$.getJSON做一個(gè)跨域ajax請(qǐng)求試驗(yàn)
相關(guān)文章
JavaScript實(shí)現(xiàn)頁(yè)面電子時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁(yè)面電子時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JavaScript時(shí)間復(fù)雜度和空間復(fù)雜度
這篇文章主要介紹了JavaScript時(shí)間復(fù)雜度和空間復(fù)雜度,時(shí)間復(fù)雜度和空間復(fù)雜度是衡量一個(gè)算法是否優(yōu)秀的標(biāo)準(zhǔn),通常我們比較兩個(gè)算法時(shí)會(huì)用預(yù)先估算和事后統(tǒng)計(jì),下文詳細(xì)介紹,需要的朋友可以參考一下2022-07-07javascript實(shí)現(xiàn)原生ajax的幾種方法介紹
項(xiàng)目中不需要加載jquery這種龐大的js插件要使用到ajax這種功能該如何辦呢?下面和大家分享幾種利用javascript實(shí)現(xiàn)原生ajax的方法2013-09-09javascript實(shí)現(xiàn)信息增刪改查的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)信息增刪改查的方法,實(shí)例分析了javascript操作頁(yè)面元素實(shí)現(xiàn)針對(duì)頁(yè)面信息的增刪改查功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07js實(shí)現(xiàn)購(gòu)物車加減以及價(jià)格計(jì)算功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物車加減以及價(jià)格計(jì)算功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08RequireJS多頁(yè)面應(yīng)用實(shí)例分析
這篇文章主要介紹了RequireJS多頁(yè)面應(yīng)用實(shí)例分析的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JavaScript實(shí)現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-03-03