JSONP前後端實現原理
阿新 • • 發佈:2019-01-27
前端:
//動態建立script標籤,並請求 function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.src = src; document.body.appendChild(script); }; //如:在onload後,跨域請求 window.onload = function(){ addScriptTag('http://127.0.0.1:8080/jsonp?callback=monkey'); }; //回撥的方法,且必須為全域性方法,不然會報錯 function monkey(data){ alert(JSON.stringify(data)); };
後端(node環境):
//引入node核心模組http var http = require('http'); //引入url模組解析url字串 var url = require('url'); //引入querystring模組處理query字串 var querystring = require('querystring'); //建立新的HTTP伺服器 var server = http.createServer(); //通過request事件來響應request請求 server.on('request',function(req, res){ var urlPath = url.parse(req.url).pathname; var qs = querystring.parse(req.url.split('?')[1]); if(urlPath === '/jsonp' && qs.callback){ res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'}); var data = { "name": "Monkey" }; data = JSON.stringify(data); var callback = qs.callback+'('+data+');'; res.end(callback); } else{ res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); res.end('hello'); } }); //監聽8080埠 server.listen('3000'); //用於提示我們伺服器啟動成功 console.log('Server running!');