jsonp的具體實(shí)現(xiàn)
1.創(chuàng)建一個(gè)exress項(xiàng)目州藕，并安裝jquery的依賴(lài)，在項(xiàng)目中創(chuàng)建兩個(gè)服務(wù)器端的js文件床玻，使它們監(jiān)聽(tīng)不同的端口號(hào)，這樣保證了它們的域名不同锈死。
//server1.js
const express = require('express');
const app = express();
app.use(express.static('./'));
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
//server2.js
const express = require('express');
const app = express();
app.get('/json-data',function (req,res) {
res.json({name:'liyan'});
});
var server = app.listen(8000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
2.添加json.html文件，我想讓json.html文件訪問(wèn)http://localhost:8000/json-data發(fā)送的數(shù)據(jù)其屏，我使用ajax發(fā)送請(qǐng)求缨该，代碼如下：
<html>
<head>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
function loadData() {
$.get('http://localhost:8000/json-data', function (data) {
$('#data').text(data);
});
}
</script>
</head>
<body>
<div>
<button onclick="loadData()">please click me gain client data</button>
</div>
<div id="data"></div>
</body>
</html>
現(xiàn)在我啟動(dòng)服務(wù)器偎行，去訪問(wèn)http://localhost:3000/json.html压彭，但是我獲取不到我想要的數(shù)據(jù)，出現(xiàn)了如下的錯(cuò)誤：
錯(cuò)誤提示的意思是：不能請(qǐng)求http://localhost:8000/json-data下的資源壮不，應(yīng)為請(qǐng)求資源上不存在“訪問(wèn)控制允許源”的標(biāo)頭，因此不允許訪問(wèn)询一。
3.使用jsonp進(jìn)行跨域訪問(wèn)
Web頁(yè)面上調(diào)用js文件時(shí)是不受跨域的影響癌椿，如果想通過(guò)純web端跨域訪問(wèn)數(shù)據(jù)就只有一種可能菱阵，那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里踢俄，供客戶端調(diào)用和進(jìn)一步處理晴及；JSON的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù)，更妙的是JSON還被js原生支持虑稼，所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù)。
根據(jù)以上的原理蛛倦，web客戶端通過(guò)與調(diào)用腳本一模一樣的方式，來(lái)調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件（一般以JSON為后綴）溯壶，顯而易見(jiàn)，服務(wù)器之所以要?jiǎng)討B(tài)生成JSON文件且改，目的就在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去〖嘏埃客戶端在對(duì)JSON文件調(diào)用成功之后，也就獲得了自己所需的數(shù)據(jù)效扫，剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了。
于是菌仁，我在server2.js的文件里添加如下的代碼：
app.get('/jsonp-data',function (req,res) {
res.jsonp({name:'liyan'});
});
使用jsonp發(fā)現(xiàn)我想要的數(shù)據(jù)，現(xiàn)在济丘，我需要在客戶端接受數(shù)據(jù)，并對(duì)他進(jìn)行處理摹迷，修改json.html文件的代碼，如下所示：
function loadData() {
$.get({
url:'http://localhost:8000/jsonp-data',
dataType:'jsonp',
success:function (data) {
$('#data').text(JSON.stringify(data))
}
})
}
4.重新啟動(dòng)兩個(gè)服務(wù)器峡碉，現(xiàn)在我訪問(wèn)http://localhost:3000/json.html點(diǎn)擊按鈕就可以獲得http://localhost:8000/jsonp-data的資源了。
至此吉执，jsonp解決跨域的簡(jiǎn)單例子就完成了疯淫。
