JSONP跨域函数的手工实现

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ajax #web #jsonp #ViewUI

jsonp 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的跨域请求示例，使用JSONP方式从前端发起请求，并通过Node.js后端处理返回数据。该示例展示了如何利用时间戳避免函数名冲突，以及如何在前端动态创建script标签实现跨域请求。

效果：

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