當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript --- 实战中体会jsonp
生活随笔
收集整理的這篇文章主要介紹了
javascript --- 实战中体会jsonp
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
準(zhǔn)備:1.需要node環(huán)境,node環(huán)境配置 -> 百度搜索 “node環(huán)境配置” (網(wǎng)上太多了)
node是否安裝成功指令如下:
創(chuàng)建如下頁面結(jié)構(gòu):
html結(jié)構(gòu)如下:
js結(jié)構(gòu)如下:
// jsonp.jsconst http = require('http'); // url 幫助解析請求路徑 const url = require('url');const server = http.createServer();server.on('request', function(req, res) {// 解構(gòu)賦值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標(biāo)簽的src屬性.(即jsonp的原理).你可能體會不到這樣做的用處.下面將栗子改變?nèi)缦?
// 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>// 注意參數(shù)是 服務(wù)端傳遞過來的function htmlMethod(data) {console.log('從后端獲取的數(shù)據(jù)!!!', 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) {// 解構(gòu)賦值let { pathname, query } = url.parse(req.url, true);if (pathname === '/tryjsonp') {// 返回給前端的數(shù)據(jù)let params = JSON.stringify({name: '栗子',major: 'web開發(fā)'})// 模板字符串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啟動服務(wù)器監(jiān)聽. node jsonpdata.js
從后端成功取到數(shù)據(jù)…
PS:個人建議,對著上面代碼敲一遍.
有問題歡迎留言!!!
總結(jié)
以上是生活随笔為你收集整理的javascript --- 实战中体会jsonp的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端vue导出excel
- 下一篇： snmp获取交换机日志_日志审计系统和数