zoukankan      html  css  js  c++  java
  • jsonp的实现

    以前只知道jsonp其实是通过创建一个新的script标签,然后进行请求数据,因为script的src属性进行请求,没有存在跨域这么一说,

    因此jsonp的方式也是只能是通过get来进行请求,于是今天再网上看到这么一个做法,觉得可以学习一下。

    原生
    <script>
        var script = document.createElement('script');
        script.type = 'text/javascript';
     
        // 传参并指定回调执行函数为onBack
        script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
        document.head.appendChild(script);
     
        // 回调执行函数
        function onBack(res) {
            alert(JSON.stringify(res));
        }
     </script>
     
    jquery
    $.ajax({
        url: 'http://www.domain2.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 请求方式为jsonp
        jsonpCallback: "onBack",    // 自定义回调函数名
        data: {}
    });
    
    vue
    this.$http.jsonp('http://www.domain2.com:8080/login', {
        params: {},
        jsonp: 'onBack'
    }).then((res) => {
        console.log(res); 
    })
    
    配合的后端node实现,其他服务器语言也可以
    const querystring = require('querystring');
    const http = require('http');
    const server = http.createServer();
    server.on('request', function(req, res) {
        var params = qs.parse(req.url.split('?')[1]);
        var fn = params.callback;
     
        // jsonp返回设置
        res.writeHead(200, { 'Content-Type': 'text/javascript' });
        res.write(fn + '(' + JSON.stringify(params) + ')');
     
        res.end();
    });
    server.listen('8080');
  • 相关阅读:
    git分布式版本控制(六)
    git分布式版本控制(五)
    git分布式版本控制(四)
    git分布式版本控制(三)
    git分布式版本控制(二)
    git分布式版本控制(一)
    svn版本控制(十)
    svn版本控制(九)
    svn版本控制(八)
    svn版本控制(七)
  • 原文地址:https://www.cnblogs.com/chao202426/p/11528503.html
Copyright © 2011-2022 走看看