jsonp實作的原理主要是利用src屬性可以去加載跨域的資源，例如script、img。 動态的建立script标簽，加載跨域資源
下面看一個簡單的例子： 前端：（本頁面的端口号為63342）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script src="http://localhost:8080/js/index.js"></script>//去加載跨域資源
</html> 跨域資源站點後端（我這裡使用nodejs寫的，很簡單的一個server）：
const express=require('express');
const fs=require('fs');
const expressStatic=require('express-static')
var server=express();
server.get('/js/index.js',function (req,res) {
fs.readFile('./js/index.js',function (err,data) {
if(err){
res.send('資料讀取失敗')
}else {
res.send(data);
}
res.end();
})
})
server.listen(8080); 那麼我們可以在前端頁面看到結果，如圖
二、用xhr去請求資料會怎麼樣呢： 前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span>名字:</span><span class="name"></span><br/>
<span>年齡:</span><span clase="age"></span>
</body>
<script >
function XHR() {
var xhr;
try {
xhr = new XMLHttpRequest();
}
catch (e) {
var IEXHRVers = ["Msxml3.XMLHTTP", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0, len = IEXHRVers.length; i < len; i++) {
try {
xhr = new ActiveXObject(IEXHRVers[i]);
}
catch (e) {
continue;
}
}
}
return xhr;
}
var xhr = XHR();
xhr.open('GET', 'http://localhost:8080/json/test.json', true);
xhr.onreadystatechange = function () {
//xhr.onload=
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var da = xhr.responseText;
eval("var json=" + da);
// var json=JSON.parse(da)
console.log(json);
} else {
console.log("資料請求出錯");
}
}
}
// xhr.onerror=function () {
// console.log('資料請求出錯')
// }
xhr.send(null)
</script>
</html> 後端：
const express=require('express');
const fs=require('fs');
// const expressStatic=require('express-static');
var server=express();
server.get('/json/test.json',function (req,res) {
var obj=req.query;
fs.readFile('./json/test.json',function (err,data) {
if(err){
res.send('資料讀取失敗')
}else {
res.send(data);
}
res.end();
})
})
// server.use(expressStatic('./'))
server.listen(8080);
console.log('啟動成功') 結果：跨域了無法請求到資料
三、相對jsonp隻能請求get資料，cors跨域資源共享實作跨域請求資源更好 隻需要後端實作cors接口就好，改變http響應頭。
const express=require('express');
const fs=require('fs');
// const expressStatic=require('express-static');
var server=express();
server.get('/json/test.json',function (req,res) {
var obj=req.query;
res.header("Access-Control-Allow-Origin", "*");//所有站點都可以通路該資源
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
fs.readFile('./json/test.json',function (err,data) {
if(err){
res.send('資料讀取失敗')
}else {
res.send(data);
}
res.end();
})
})
// server.use(expressStatic('./'))
server.listen(8080);
console.log('啟動成功')
原文釋出時間為：2018年03月17日
原文作者：
莫西摩西本文來源：
開源中國如需轉載請聯系原作者