當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript --- 实战中体会jsonp
生活随笔
收集整理的這篇文章主要介紹了
javascript --- 实战中体会jsonp
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
準備:1.需要node環境,node環境配置 -> 百度搜索 “node環境配置” (網上太多了)
node是否安裝成功指令如下:
創建如下頁面結構:
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
注意路徑…
打開瀏覽器:
以上利用了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:個人建議,對著上面代碼敲一遍.
有問題歡迎留言!!!
總結
以上是生活随笔為你收集整理的javascript --- 实战中体会jsonp的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端vue导出excel
- 下一篇： Spring MVC Ajax返回中文乱