JavaScript如何實(shí)現(xiàn)跨域請(qǐng)求
什么是跨域請(qǐng)求?
簡(jiǎn)單的理解就是向不在同一個(gè)域名的服務(wù)器文件發(fā)出請(qǐng)求。這個(gè)還是用實(shí)際的例子來(lái)說明一下吧,比如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)求操作的問題。
為什么直接使用javascript不能實(shí)現(xiàn)跨域請(qǐng)求?
由于安全的原因,javacript同源策略的限制,瀏覽器不允許Javascript請(qǐng)求跨域的資源。
如何解決javascript不能實(shí)現(xiàn)跨域請(qǐng)求的問題?
本文用到的解決方法是使用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拒絕訪問的解決方法
- js跨域請(qǐng)求的5中解決方式
- JSONP跨域GET請(qǐng)求解決Ajax跨域訪問問題
- 通過jquery的$.getJSON做一個(gè)跨域ajax請(qǐng)求試驗(yàn)
相關(guān)文章
JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別,很多情況下,箭頭函數(shù)和函數(shù)表達(dá)式創(chuàng)建的函數(shù)并無(wú)區(qū)別,只有寫法上的不同,本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別,感興趣的朋友跟隨小編一起看看吧2021-11-11
TypeScript接口interface的高級(jí)用法詳解
interface 是typescript核心內(nèi)容,用來(lái)定義規(guī)范,無(wú)論是函數(shù),數(shù)組或者對(duì)象,還是類都可以用接口interface來(lái)進(jìn)行規(guī)范,而接口本身也是可以繼承和擴(kuò)展的,本文給大家詳細(xì)介紹了TypeScript interface的高級(jí)用法,需要的朋友可以參考下2025-03-03
layui 上傳文件_批量導(dǎo)入數(shù)據(jù)UI的方法
今天小編就為大家分享一篇layui 上傳文件_批量導(dǎo)入數(shù)據(jù)UI的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
Ant Design Pro 下實(shí)現(xiàn)文件下載的實(shí)現(xiàn)代碼
JavaScript鼠標(biāo)事件監(jiān)聽、觸發(fā)時(shí)機(jī)和觸發(fā)順序?qū)嵗v解
根據(jù)表格中的某一列進(jìn)行排序的javascript代碼
js 連續(xù)賦值的簡(jiǎn)單實(shí)現(xiàn)

