加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

JSONP跨域函数的手工实现

发布时间:2020-12-16 18:55:34 所属栏目:百科 来源:网络整理
导读:效果: 当前文件地址为 : http://127.0.0.1:8080/ 所请求的文件地址和参数为 : http://127.0.0.1:3000/sendjsonp?name=likekeage=18cb=callback1470904676170 直接上代码吧: index.html !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleDocum

效果:

当前文件地址为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);

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读