jsonp步骤_JSONP 原理和使用

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个

首先，网页动态插入

function addScriptTag(src) {

var script = document.createElement('script');

script.setAttribute("type", "text/javascript");

script.src = src;

document.body.appendChild(script);

}

window.onload = function () {

addScriptTag('http://127.0.0.1:3000?callback=foo');

}

function foo(data) {

// 获取用户信息- 姓名：王小二 年龄：30

console.log("获取用户信息- 姓名：" + data.name + " 年龄：" + data.age);

};

上面代码通过动态添加

服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

nodejs 服务端代码为例：

const http = require('http');

const querystring = require('querystring');

http.createServer(function(req,res){

let params = querystring.parse(req.url.replace(/\/?\?/, ""));

let data = {"name": "王小二", "age": 30};

res.writeHead(200, {"Content-Type":"application/json;charset=utf-8"});

res.end(params.callback + "("+JSON.stringify(data)+")");

}).listen(3000);

由于