JSONP跨域函数的手工实现

Cobain_LI

浏览: 91730 次
性别:
来自: 西安

最近访客更多访客>>

wangyy

perfree

kissycz

feiyingmm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jsonp

javascript ajax web 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);