因為ajax的跨域問題蹬音，導(dǎo)致在進(jìn)行跨域操作時，數(shù)據(jù)無法接收休玩，從而產(chǎn)生了這個不正規(guī)但好用的JOSNP技術(shù)著淆。
ajax存在跨域問題劫狠，但縱觀前端技術(shù)中，發(fā)現(xiàn)我們可以通過src去引用cdn的js永部，可以通過src去引用網(wǎng)上的某個圖片独泞。
那么，我們能通過src去引用js并執(zhí)行js中的內(nèi)容嗎苔埋。答案是肯定的
HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JSONP的應(yīng)用JS例子</title>
</head>
<body>
<script>
var test = function(data){
alert(data.name+data.age);//獲取數(shù)據(jù)后的邏輯處理
}
var url = "http://localhost:63342/test/test.js"; //設(shè)置該js文件的url地址
var script = document.createElement("script"); //創(chuàng)建script標(biāo)簽
script.src = url; //設(shè)置script標(biāo)簽的src地址為設(shè)置的要跨域的js地址
document.getElementsByTagName('head')[0].appendChild(script); //將該script標(biāo)簽插入head標(biāo)簽內(nèi)
</script>
</body>
</html>
JavaScript
/*
如在上面js中創(chuàng)建的函數(shù)名為test();
如此一來懦砂，當(dāng)調(diào)用成功后則執(zhí)行該函數(shù)，并處理數(shù)據(jù)组橄。
則在下方使用test({//要傳輸?shù)臄?shù)據(jù)});
如：
test({name:"張三",age:18,sex:"男"});
*/
test({name:"張三",age:18,sex:"男"});
如此以來荞膘，便可以通過src的方式進(jìn)行跨域獲取數(shù)據(jù)。
那么jquery的方式又該如何去使用呢玉工？
盡管jsonp和ajax沒有任何關(guān)聯(lián)衫画，但因為jsonp通過前端的方式解決了ajax的跨域問題，所以Jquery將jsonp和ajax封裝在了一起
HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JSONP的應(yīng)用JQUERY例子</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$.ajax({
url:"http://localhost:63342/test/test.js",
type:"get",
dataType:"jsonp",//設(shè)置請求格式為jsonp
jsonp: "callback",//設(shè)置方式為callback回調(diào)
jsonpCallback:"test",//設(shè)置回調(diào)函數(shù)的名稱瓮栗，和要請求的js中函數(shù)名稱一致
success:function(data){//Jquery直接將結(jié)果在success中寫出削罩，不需要和原生js一樣去自己定義回調(diào)函數(shù)
alert(data.name+data.age);
}
})
});
</script>
</body>
</html>
/*
如在上面js中創(chuàng)建的函數(shù)名為test();
如此一來，當(dāng)調(diào)用成功后則執(zhí)行該函數(shù)费奸，并處理數(shù)據(jù)弥激。
則在下方使用test({//要傳輸?shù)臄?shù)據(jù)});
如：
test({name:"張三",age:18,sex:"男"});
*/
test({name:"張三",age:18,sex:"男"});
通過以上方法，便可以使用jquery實現(xiàn)jquery的調(diào)用
