JSONP跨域函数的手工实现
效果：
当前文件地址为：http://127.0.0.1:8080/
所请求的文件地址和参数为：http://127.0.0.1:3000/sendjsonp?name=likeke&age=18&cb=callback1470904676170
直接上代码吧：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>姓名：<input type="text" name="" id="myname"></p>
<p>年龄：<input type="text" name="" id="myage"></p>
<input id="send" type="button" value="请求发送">
</body>
</html>
<script>
var newjsonp=function(url,data,callback){
/*需要发送的参数值*/
var queryString = url.indexOf('?') == -1 ? '?' : '&';
/*允许只传入两个参数*/
if (3 == arguments.length) {
for (var item in data) {
queryString += item + '=' + data[item] + '&';
}
}else if(2 == arguments.length){
callback=data;
}
/*为防止变量冲突，给函数名加上时间戳*/
var callbackName='callback'+(new Date().getTime());
/*将回调函数暴露到全局*/
window[callbackName]=function (data) {
callback(data);
/*为了防止多次请求就会创建多个script节点的问题，此处先删除前一个创建的节点*/
document.body.removeChild(scriptEle);
};
queryString+='cb='+callbackName;
/*创建script节点，同时会发出请求*/
var scriptEle=window.document.createElement('script');
scriptEle.src=url+queryString;//请求参数
window.document.body.appendChild(scriptEle);
}
send.onclick=function(){
newjsonp('http://127.0.0.1:3000/sendjsonp',{
name:'likeke',
age:18
},function(data){
myname.value=data.name;
myage.value=data.age;
});
}
</script>后端代码(nodejs)：
var express = require('express');
var app = express();
app.get('/sendjsonp', function (req, res) {
var name=req.query.name,age=req.query.age,callback=req.query.cb;
var data={
'name':name,
'age':age
}
res.send(callback+'('+JSON.stringify(data)+')');
});
var server = app.listen(3000);