珠峰 AJAX --- JSONP跨域
AJAX(異步 javascript and XMLHTTPRequest)
JSONP和AJAX相同, 都 是 客戶端向服務(wù)器端發(fā)送請求:
1.給服務(wù)器端傳遞內(nèi)容
2.從服務(wù)器端獲取數(shù)據(jù)
區(qū)別:
AJAX 屬性同源策略
JSONP 非同源策略(跨域請求)
-> 實現(xiàn) 跨域請求的方式有很多種,只不過JSPNP是最常用的
大概 78種
同源:
index.html
->http://127.0.0.1:8020/JSONP/index.html
data.txt
->http://127.0.0.1:8020/JSONP/data.txt
================
區(qū)分同源 非 同源
用當(dāng)前頁面的地址 && 數(shù)據(jù)請求的接口地址
1)協(xié)議
2)域名或者IP
3)端口號
以上三部分完全相同屬于同源策略,我們使用AJAX獲取數(shù)據(jù);
只要有一個不一樣,就屬于非同源,我們一般使用JSONP獲取數(shù)據(jù);
==============================
JSONP原理
->在SCRIPT的世界中,沒有同源跨域這一說,只要你給我SRC屬性的地址
是一個合法的地址,SCRIPT都可以把對應(yīng)的內(nèi)容請求回來
->JSONP就是利用了SCRIPT的這個原理
1)我們首先把需要請求數(shù)據(jù)的,那個跨域的API數(shù)據(jù)接口的地址,賦值給SCRIPT的SRC
<script type="text/javascript" src = "http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&&callback=fn">
</script>
2)把當(dāng)前頁面中的某一個函數(shù)名當(dāng)做參數(shù)值傳遞給-騰訊-的服務(wù)器(URL問號傳參:?callback=fn)
3)騰訊的服務(wù)器接收到你的請求后,需要進(jìn)行特殊處理:把你傳遞進(jìn)來的函數(shù)名和它需要
給你的數(shù)據(jù)拼成一個字符串 例如:我們傳遞進(jìn)去的函數(shù)名是fn,它準(zhǔn)備好的數(shù)據(jù) 是
'fn([{"name":"zhufeng"}]) -> '我傳遞的函數(shù)名(需要給我們的數(shù)據(jù))'
---注意:JSONP需要 接收請求的服務(wù)器 做特殊 處理
4)最后騰訊的服務(wù)器把準(zhǔn)備的數(shù)據(jù)通過HTTP協(xié)議 返回給我們客戶端,
客戶端發(fā)現(xiàn)其實就是讓我們的fn執(zhí)行,而且還給fn傳遞了一堆的數(shù)據(jù),
那些數(shù)據(jù)就是我們想要的
=======================
jQuery的AJAX和JSONP調(diào)用
<script type="text/javascript" src="js/jquery-2.1.1.min.js">
</script>
<script type="text/javascript">
console.log(111);
//AJAX
// $.ajax({
// type:"get",
// url:"data.txt",
// async:true,
// //如果 是get 請求 則 data 為空
// data:null,
// //設(shè)置 get請求的時候 不走緩存,其實 就是在url后面 加了隨機數(shù),默認(rèn)是true
// cache:false,
// //設(shè)置 超時間 , 一般設(shè)置 3000ms
// timeout:1000,
// success:function(data){
// console.log(data);
// },
// error:function(){
// console.log("error");
// }
// });
//JSONP
//->JSONP都是GET和異步 請求的, 不存在其他的請求方式和同步請求,而且jQuery默認(rèn)就會給JSONP的請求清除緩存
$.ajax({
//type 也可以去掉
// type:"get",
url:"http://matchweb.sports.qq.com/kbs/calendar?columnId=100000",
//asyns 也可去掉
// async:true,
//不寫 dataType 的話 請求不到
dataType:"jsonp",
//自定義 傳遞給服務(wù)器的 函數(shù)名,而不是自動生成 的
jsonpCallback:"fn",
//把傳遞給函數(shù)名的那個形參變成 cb
// jsonp:"cb",//報錯
success:function(data){
console.log(data);
}
});
</script>
