原生jsonp和jquery jsonp + node.js跨域详解

最新推荐文章于 2024-09-12 13:23:45 发布

原创最新推荐文章于 2024-09-12 13:23:45 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp

web前端专栏收录该内容

30 篇文章

订阅专栏

博客展示了原生Jsonp的index.html内容，还给出了后端node的app.js代码，并呈现了相应结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JSONP原理：利用script的不受同源限制的src属性，将回调函数作为url请求的一部分返回给服务器，服务端通过字符串拼接的方式将数据包裹在回调方法中，再返回给前端执行回调函数

2.原生Jsonp: index.html

<body>
    <h1>node学习</h1>
    <div id="container">
        姓名：<h3 id="name"></h3>
        公司：<h3 id="company"></h3>
    </div>
    <script>
    //原生
        function jsonpCallBack(data) {  
            console.log("data:" + JSON.stringify(data));
            document.getElementById('name').innerText = data.name;
            document.getElementById('company').innerText = data.company;
        }    
        
        var myScript = document.createElement('script');
        myScript.type = 'text/javascript';
        myScript.src = 'http://127.0.0.1/jsonp/getData?callback=jsonpCallBack';
       
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(myScript);
    </script>
    //ajax
    <script>
        $.ajax({
            url:'/ajax/getData',
            dataType:'jsonp',
            jsonpCallback:'ajaxJsonp'
           
        })
        .done(function (data) {
       		 console.log('ajaxjsonp')
            console.log(data)
          })
        .fail(function(error){
             console.log(error)
         })
    </script>
  </body>

3.后端node,app.js代码：

var http = require('http');
var fs = require('fs');
var url = require('url');

var host = '127.0.0.1';
var port = 80;
var data = { 'name': 'jifeng', 'company': 'taobao' };


http.createServer(function (req, res) {
    var pathname = url.parse(req.url).pathname;
    console.log(pathname)
    var params = url.parse(req.url, true);
    if(pathname == '/' || pathname == '/index.html') {
        // 页面请求时，返回index.html页面
        fs.readFile('index.html', function (err, data) {
            if(err) {
                res.end('页面错误');
                return;
            }
           
            res.writeHead(200, {'Content-Type': 'text/html'});    
            res.write(data.toString()); 
        })
    } else if (pathname == '/jsonp/getData') {
        // jsonp/getData请求，返回数据
          if (params.query && params.query.callback) {
            var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
            res.end(str);
        } 
    }
    else if(pathname == '/ajax/getData'){
        if (params.query && params.query.callback) {
            var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
            res.end(str);
        }
    }
  
}).listen(port, host, function () {
    console.log('server is listening on port ' + port);
})

4.结果如下：
在这里插入图片描述