如今大都要用到跨域的方法請(qǐng)求數(shù)據(jù)谐区,網(wǎng)上的方法也是各式各樣,這里我重點(diǎn)介紹兩種不同的跨域形式暑竟。
一.跨域請(qǐng)求接口
主要介紹兩種jquery的方式
1.$.getJSON
此方法簡(jiǎn)單粗暴,如果你對(duì)ajax還算了解,推薦使用此方法幔荒,一步搞定。
? $.getJSON("http://xxxxxxxxxxx/xxxxxxxx/xxxxxx/list?callback=?","name=zhangsan&id=10",function (json){})
這個(gè)方法jquery會(huì)自動(dòng)判斷是否跨域梳玫,如果跨域爹梁,則jquery會(huì)以jQuery1345xxxxxxxxxxx的形式自動(dòng)填充callback,并按照需求返回?cái)?shù)據(jù)到回調(diào)函數(shù):(如圖)
第二個(gè)部分傳遞的data可以按照官方格式(也就是name=xx&id=xx)來(lái)傳遞提澎,也可以以json形勢(shì)傳遞姚垃。
2.$.ajax
這個(gè)方法為什么放到第二個(gè)來(lái)說(shuō)?主要是涉及到的幾個(gè)參數(shù)需要與第一種方法對(duì)比解釋:
$.ajax({
? ? ? url:"http://xxxxxxxxxxxxxxx",? ? //首先是url這里寫上要跨域請(qǐng)求的地址
? ? ? type:"get",? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //必須是get盼忌,目前跨域只支持get方法积糯。
? ? ? datatype:"jsonp",
? ? ? jsonp:"mycallback",? ? //這個(gè)jsonp是什么意思?看到第一種方法的callback沒(méi)谦纱?如果你不設(shè)置jsonp看成,那么默認(rèn)回調(diào)函數(shù)參數(shù)就是callback,但是最好別改跨嘉,因?yàn)檫@是向服
務(wù)器發(fā)送請(qǐng)求的函數(shù)參數(shù)名川慌,要和服務(wù)器端的一致~~~
? ? ? jsonpcallback:"jsonp_callback",? //這里的jsonpcallback就是回調(diào)函數(shù)名,我在第一種方法中說(shuō)道過(guò)祠乃,使用getJSON時(shí)梦重,回調(diào)函數(shù)的名字由query自動(dòng)填充,如果設(shè)置了就是按照你
的名字返回跳纳。
? ? ? success:function(json){? ?
? ? //do something?
? ? }
})
二.跨域請(qǐng)求文件
有些時(shí)候我們可能需要跨域請(qǐng)求一些文件忍饰,那么這個(gè)時(shí)候就沒(méi)有后端的童鞋給你合作,顯然我們jQuery請(qǐng)求接口的方式不起作用了寺庄。那么這個(gè)時(shí)候就需要用到咱們jsonp跨域的的原理了艾蓝。
1.jsonp本質(zhì)
是通過(guò)script標(biāo)簽請(qǐng)求數(shù)據(jù)力崇,然后返回的數(shù)據(jù)再用一個(gè)函數(shù)來(lái)包裝。
2.jsonp原理
因?yàn)樵蹅兊膕rc是沒(méi)有跨域的限制的赢织,所以我們通過(guò)script標(biāo)簽跨域請(qǐng)求資源的原理來(lái)間接的請(qǐng)求數(shù)據(jù)亮靴。
Code
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Jsonp Test</title>
</head>
<body>
? ? <script type="text/javascript">
? ? ? ? ? ? function getData(data){
? ? ? ? ? ? ? ? console.log(data.name);
? ? ? ? ? ? }
? ? </script>
</body>
<script type="text/javascript" src="test.json"></script>
</html>
這里我們定義了一個(gè)getData的方法,來(lái)獲取咱們src讀取的資源于置,相當(dāng)于請(qǐng)求成功的回調(diào)函數(shù)茧吊。
test.json Code
getData({"name":"pwh","sex":"23"})
這里咱們用getData把數(shù)據(jù)包裝起來(lái),齊活兒八毯!