個人認(rèn)為, 網(wǎng)上有很多關(guān)于jsonp的講解, 但實在是講得不夠通俗, 所以我想寫這篇文章能夠讓更多人接受這簡單易懂的jsonp.
同源策略
在講jsonp之前, 我們需要先了解什么是同源策略. 同源意思是指協(xié)議, 域名, 端口號相同. 而同源策略就是基于安全考慮, 當(dāng)前源不能訪問不同源的內(nèi)容.
簡單來說, A服務(wù)器想要通過直接請求訪問B服務(wù)器的數(shù)據(jù)的時候, B服務(wù)器的協(xié)議, 域名, 端口必須與A服務(wù)器的相同, 才能正常獲取. 例如. 我直接通過瀏覽器訪問天氣API來獲取深圳的天氣是可以成功獲得json數(shù)據(jù), 而在代碼中使用ajax獲取則因為同源策略獲取失敗.
直接通過瀏覽器輸入網(wǎng)址訪問:
通過代碼去訪問數(shù)據(jù):
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<div id="mydiv">
<button id="btn">點擊發(fā)起ajax請求獲取天氣數(shù)據(jù)</button>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert( xhr.responseText );
}
};
xhr.open('get', 'http://www.weather.com.cn/data/cityinfo/101280601.html', true);
xhr.send();
};
};
</script>
</html>
運行點擊發(fā)送ajax請求后得到如下錯誤:
這就是同源策略產(chǎn)生的問題.
如何解決?
先說一個概念, 訪問非同源的資源被稱為跨域訪問. 而跨域訪問其實有這么幾個特殊情況, 并不是所有的資源都無法跨域訪問, 其實帶src屬性的<script>, <iframe>, <img>標(biāo)簽和帶href的<link>標(biāo)簽都不受跨域限制.
那么知道了這一點, 我們不難想到, 既然js可以跨域引入, 那么我們可以用這個特性來將數(shù)據(jù)攜帶回來. 所以我們可以回歸主題了, jsonp就是利用<script>來實現(xiàn)跨域獲取數(shù)據(jù)的.
以下是一些不影響任何操作的更改, 可以略過, 直接查看jsonp部分
因為jsonp是需要后端配合的, 而且現(xiàn)在豆瓣開發(fā)API已經(jīng)關(guān)閉使用, 我只能自己編寫測試用的服務(wù)器. 和之前一樣的結(jié)果, 直接進行ajax請求數(shù)據(jù)時還是一樣受同源策略限制, 先貼圖展示一下更改.(實際上只是更改了一下訪問的地址, 希望大家不要覺得和之前有任何區(qū)別)
更改的代碼:
將:
xhr.open('get', 'http://www.weather.com.cn/data/cityinfo/101280601.html', true);
改成了:
xhr.open('get', 'http://localhost:8080/weather', true);
效果:
只是更換了訪問的地址, 效果并沒有任何改變. 不會影響接下來的任何操作.
jsonp
jsonp是 json with padding ( 帶填充的json ) 的簡寫. 現(xiàn)在一般前后端的數(shù)據(jù)傳輸格式都是json格式, 原因是可以簡潔描述復(fù)雜數(shù)據(jù), 主要還有一點是被js原生支持.
jsonp實現(xiàn)跨域請求的原理簡單的說, 就是動態(tài)創(chuàng)建<script>標(biāo)簽, 然后利用<script>的src 不受同源策略約束來跨域獲取數(shù)據(jù).
jsonp由兩部分組成: 回調(diào)函數(shù)和數(shù)據(jù). 回調(diào)函數(shù)是當(dāng)響應(yīng)到來時應(yīng)該在頁面中調(diào)用的函數(shù). 回調(diào)函數(shù)的名字一般是在請求中指定的. 而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的json數(shù)據(jù)寄悯。
這些概念是抄來的, 其實看不明白也沒關(guān)系, 個人覺得實例已經(jīng)講得很清楚了, 可以把下面部分看完了再上來結(jié)合文字理解.
現(xiàn)在大家知道了以下兩點:
- 什么是同源策略限制
- <script>標(biāo)簽可以無視跨域限制
那么我們可以進行接下來的講解了, 或許大家還不清楚<script>標(biāo)簽可以無視跨域限制是什么意思, 或者是能做到什么, 那么我用代碼來展示給大家看看.
我的服務(wù)器部分代碼內(nèi)容如下:
@RequestMapping(value = "/print")
public String getFunction(){
return "print()";
}
看不懂沒關(guān)系, 你只要知道訪問http://localhost:8080/print
會得到如下結(jié)果
然后我將運行如下代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>從服務(wù)器加載js進行方法的調(diào)用</title>
</head>
<body>
</body>
<script>
function print(){
console.log("我被調(diào)用了啊!!!");
}
</script>
<script src="http://localhost:8080/print"></script>
</html>
運行結(jié)果如下:
從如上展示中我們發(fā)現(xiàn), 服務(wù)器中傳過來的字符串如果使用<script>標(biāo)簽進行引入, 會被解析成js代碼. 從而實現(xiàn)在客戶端聲明方法, 通過服務(wù)器傳來的調(diào)用函數(shù)語句來調(diào)用.
大家可能猜到該怎么使用jsonp了.
那么我們開始說通過jsonp進行跨域獲取localhost:8080/weather返回的數(shù)據(jù)的具體實現(xiàn). 先理一下思路.
- 我們知道可以通過<script>標(biāo)簽引入js(就算是普通字符串也會被解析成js). 但是我們不可能直接寫個:
<script src="http://localhost:8080/weather"></script>
因為這跟直接在代碼中寫
<script>{"weatherinfo":{"city":"深圳","cityid":"101280601","temp1":"24℃","temp2":"30℃","weather":"陣雨轉(zhuǎn)大雨","img1":"n3.gif","img2":"d9.gif","ptime":"18:00"}}</script>
一樣, 并沒有任何意義. 我們需要的是對可以操作這些數(shù)據(jù), 而不是那它作為js代碼.
- 我們知道可以通過<script>標(biāo)簽從服務(wù)器加載js進行方法的調(diào)用, 這個遠程的方法調(diào)用其實方法在客戶端, 服務(wù)器只是傳來了一個調(diào)用的js指令而已.
這段代碼在客戶端
<script>
function print(){
console.log("我被調(diào)用了啊!!!");
}
</script>
調(diào)用代碼print()是通過<script>從服務(wù)器中加載.
- 還知道我們需要的數(shù)據(jù)產(chǎn)自服務(wù)器, 所以我們不妨讓服務(wù)器攜帶著數(shù)據(jù), 在進行方法調(diào)用的時候把數(shù)據(jù)穿給我們. 這樣的話, 服務(wù)器需要知道我們已經(jīng)寫好在客戶端的方法的方法名, 便于調(diào)用.
思路大概是這樣了, 如果看不懂, 是我表述確實不太貼切了, 很抱歉, 但是大家一定還是能學(xué)會, 還是那句話, 看代碼吧, 代碼更容易懂. 所以具體實現(xiàn)如下:
先看服務(wù)端代碼:
@RequestMapping(value = "/weather",method = RequestMethod.GET)
public String getWeatherByJsonp(@RequestParam("callback") String callback){
return callback + "({\"weatherinfo\":{\"city\":\"深圳\",\"cityid\":\"101280601\",\"temp1\":\"24℃\",\"temp2\":\"30℃\",\"weather\":\"陣雨轉(zhuǎn)大雨\",\"img1\":\"n3.gif\",\"img2\":\"d9.gif\",\"ptime\":\"18:00\"}})";
}
客戶端代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp的測試樣例</title>
</head>
<body>
</body>
<script>
function printData(data){
var str = "城市:" + data.weatherinfo.city + "\r\n最低溫度:" + data.weatherinfo.temp1 + "\r\n最高溫度:" + data.weatherinfo.temp2;
console.log(str);
}
</script>
<script src="http://localhost:8080/weather?callback=printData"></script>
</html>
打開客戶端頁面效果展示:
看效果我們是成功跨域請求到了數(shù)據(jù). 接下來我給大家解釋一下代碼.
- 客戶端先自定義一個js函數(shù)printData, 這個函數(shù)接受一個參數(shù)data, 這個data就是我們想要通過請求獲取的. 函數(shù)體中對data(也就是我們需要的數(shù)據(jù))進行處理.
- 但是我們還沒有這個數(shù)據(jù), 需要調(diào)用函數(shù), 并且傳這個數(shù)據(jù)進來, 數(shù)據(jù)沒有, 調(diào)用方法的語句也沒有, 我們知道這兩個都是可以通過<script>標(biāo)簽引入.
- 所以, 我們在服務(wù)器端, 不僅僅是返回一個數(shù)據(jù)這么簡單, 我們需要把數(shù)據(jù)嵌入到一個調(diào)用函數(shù)的語句里面, 但是由于服務(wù)器端還不知道前端到底寫了什么函數(shù)來處理這些數(shù)據(jù), 也就是前端自定義的函數(shù)名我們還不清楚
- 所以需要前端通過請求時攜帶參數(shù)
callback=printData傳一個函數(shù)名過來告訴服務(wù)器端, 服務(wù)器端就使用這個printData包裹住數(shù)據(jù)返回到客戶端, 從而進行攜帶參數(shù)的調(diào)用了printData(data).
簡而言之就是先假設(shè)有個能拿到數(shù)據(jù)的函數(shù)A, 然后我們通過<script>引入服務(wù)端的調(diào)用函數(shù)A的語句, 這個語句里包含了數(shù)據(jù). 并執(zhí)行了函數(shù)A.
這就是我總結(jié)的jsonp解決跨域問題的過程. 希望能對大家有哪怕一絲幫助.
