JSONP跨域函数的手工实现

前端之家收集整理的这篇文章主要介绍了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);

猜你在找的Json相关文章