如今大都要用到跨域的方法請求數(shù)據(jù)，網(wǎng)上的方法也是各式各樣，這里我重點(diǎn)介紹兩種不同的跨域形式。
一.跨域請求接口
主要介紹兩種jquery的方式
1.$.getJSON
此方法簡單粗暴，如果你對ajax還算了解，推薦使用此方法，一步搞定。
$.getJSON("http://xxxxxxxxxxx/xxxxxxxx/xxxxxx/list?callback=?","name=zhangsan&id=10",function (json){})
這個方法jquery會自動判斷是否跨域，如果跨域，則jquery會以jQuery1345xxxxxxxxxxx的形式自動填充callback，并按照需求返回?cái)?shù)據(jù)到回調(diào)函數(shù)：（如圖）
第二個部分傳遞的data可以按照官方格式（也就是name=xx&id=xx）來傳遞，也可以以json形勢傳遞。
2.$.ajax
這個方法為什么放到第二個來說？主要是涉及到的幾個參數(shù)需要與第一種方法對比解釋：
$.ajax({
url:"http://xxxxxxxxxxxxxxx", //首先是url這里寫上要跨域請求的地址
type:"get", //必須是get，目前跨域只支持get方法。
datatype:"jsonp",
jsonp:"mycallback", //這個jsonp是什么意思？看到第一種方法的callback沒？如果你不設(shè)置jsonp，那么默認(rèn)回調(diào)函數(shù)參數(shù)名就是callback，但是最好別改，因?yàn)檫@是向服務(wù)器發(fā)送請求的函數(shù)參數(shù)名，服務(wù)端拿到該參數(shù)的值value后以"value({\"userid\":0,\"username\":\"null\"})"的形式返回給客戶端數(shù)據(jù)
jsonpcallback:"mycallback",//這里的jsonpcallback就是回調(diào)函數(shù)名，我在第一種方法中說道過，使用getJSON時，回調(diào)函數(shù)的名字由query自動填充，如果設(shè)置了就是按照你的名字返回。即可以在success方法外調(diào)用該函數(shù)獲得返回值
success:function(json){
//do something
}
})
二.跨域請求文件
有些時候我們可能需要跨域請求一些文件，那么這個時候就沒有后端的童鞋給你合作，顯然我們jQuery請求接口的方式不起作用了。那么這個時候就需要用到咱們jsonp跨域的的原理了。
1.jsonp本質(zhì)
是通過script標(biāo)簽請求數(shù)據(jù)，然后返回的數(shù)據(jù)再用一個函數(shù)來包裝。
2.jsonp原理
因?yàn)樵蹅兊膕rc是沒有跨域的限制的，所以我們通過script標(biāo)簽跨域請求資源的原理來間接的請求數(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>
這里我們定義了一個getData的方法，來獲取咱們src讀取的資源，相當(dāng)于請求成功的回調(diào)函數(shù)。
test.json Code
getData({"name":"pwh","sex":"23"})
這里咱們用getData把數(shù)據(jù)包裝起來，齊活兒！
執(zhí)行上述代碼，即可實(shí)現(xiàn)咱們利用jsonp原理請求文件！
