JSONP
全稱：JSON with Padding，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題该编。
- 通過script標簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)當做JS代碼來執(zhí)行。
- 因為加載的數(shù)據(jù)是JSON格式，所以需要提前在頁面上聲明一個全局的函數(shù)，函數(shù)名通過接口傳遞參數(shù)的方式傳給后臺熟呛，后臺解析到函數(shù)名后再原始數(shù)據(jù)上包裹這個函數(shù)的函數(shù)名，發(fā)送給前端（JSONP需要對應接口的后端的賠后才能實現(xiàn)）
代碼如下：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跨域演示</title>
<script src="index1.js"></script>
</head>
<body>
</body>
</html>
JS部分：
文件名jsonp1.js
function loadScript(url) {
var script = document.createElement('script')
script.src = url
script.type = 'text/javascript'
var head = document.querySelector('head')
head.appendChild(script)
}
function jsonpCallback(data) {
console.log(JSON.stringify(data))
}
后端邏輯尉姨，文件名為jsonp2.js
var url = require('url')
var http = require('http')
http.createServer(function (req, res) {
var data = {
name: "xiaoming"
};
var callbackName = url.parse(req.url, true).query.callback
res.writeHead(200)
res.end(`${callbackName}(${JSON.stringify(data)})`)
}).listen(3000, 'localhost')
console.log('請打開localhost:3000查看結(jié)果')
驗證結(jié)果：
終端輸入node jsonp2.js
打開localhost:3000
