準備:1.需要node環境,node環境配置 -> 百度搜索 “node環境配置” (網上太多了)
node是否安裝成功指令如下:
創建如下頁面結構:
html結構如下:
// jsonp.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>jsonp</title>
</head><body><script>function htmlMethod() {console.log('this is in html!');}</script><script src="http://127.0.0.1:3000/tryjsonp?callback=htmlMethod"></script></body></html>
js結構如下:
// jsonp.jsconst http = require('http');
// url 幫助解析請求路徑
const url = require('url');const server = http.createServer();server.on('request', function(req, res) {// 解構賦值let { pathname, query } = url.parse(req.url, true);if (pathname === '/tryjsonp') {// 模板字符串var scriptStr = `${query.callback}()`;res.end(scriptStr);} else {res.end('404');}
})server.listen(3000, function() {console.log("server listen at http://127.0.0.1:3000");
})
命令行啟動node jsonp.js
注意路徑…
打開瀏覽器:
說明:
1.當打開瀏覽器時,會依次執行<script>標簽.
2.當遇到<script src="http://127.0.0.1:3000?tryjsonp?callback=htmlMethod>"></script>時,瀏覽器會像后臺發送一個get請求.
3.后臺使用node,監聽了3000端口下的tryjsonp路由,通過解析url路徑.將callback=htmlMethod中的方法名提取出來.
4.通過res.end方法.返回給瀏覽器.瀏覽器執行htmlMethod()
以上利用了script標簽的src屬性.(即jsonp的原理).你可能體會不到這樣做的用處.下面將栗子改變如下:
// jsonpdata.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>jsonp</title>
</head><body><script>// 注意參數是 服務端傳遞過來的function htmlMethod(data) {console.log('從后端獲取的數據!!!', data);}</script><script src="http://127.0.0.1:3000/tryjsonp?callback=htmlMethod"></script></body></html>
// jsonpdata.js
const http = require('http');
// url 幫助解析請求路徑
const url = require('url');const server = http.createServer();server.on('request', function(req, res) {// 解構賦值let { pathname, query } = url.parse(req.url, true);if (pathname === '/tryjsonp') {// 返回給前端的數據let params = JSON.stringify({name: '栗子',major: 'web開發'})// 模板字符串var scriptStr = `${query.callback}(${params})`;res.end(scriptStr);} else {res.end('404');}
})server.listen(3000, function() {console.log("server listen at http://127.0.0.1:3000");
})
NODE啟動服務器監聽. node jsonpdata.js
從后端成功取到數據…
PS:個人建議,對著上面代碼敲一遍.
有問題歡迎留言!!!
 never called!)
