zoukankan      html  css  js  c++  java
  • JSONP

    前端传一个回调函数,后端接收回调函数是并把数据当做参数一起返回,实际的执行是通过script标签起作用的(script标签会自动下载资源后并当做JS执行),所以控制执行可以通过动态创建script标签的方式。

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <button id="btn1">请求</button>
        <!-- <script>
        function test(data) {
            alert(data.name);
        }
        </script>
        <script src="http://127.0.0.1:8080/jsonp?callback=test"></script> -->
        <script>
        function addScriptTag(src) {
            var script = document.createElement("script");
            script.setAttribute('type', 'text/javascript');
            script.src = src;
            document.body.appendChild(script);
        }
        var oBtn = document.querySelector("#btn1");
        oBtn.onclick = function() {
            addScriptTag("http://127.0.0.1:8080/jsonp?callback=hello")
        };
        function hello(data) {
            console.log(data);
        }
        </script>
    </body>
    </html>
    

    server.js

    var http = require('http');
    var url = require('url');
    
    var querystring = require('querystring');
    
    var server = http.createServer();
    
    server.on('request', function (req, res) {
        var urlPath = url.parse(req.url).pathname;
        var qs = querystring.parse(req.url.split('?')[1]);
        // http://localhost:8080/jsonp?callback=test // { callback: 'test' }
        if (urlPath === "/jsonp" && qs.callback) {
            res.writeHead(200, {
                'Content-Type': 'text/plain;charset=utf-8'
            });
            var data = {
                "name": "Monkey"
            };
            data = JSON.stringify(data);
    
            var callback = qs.callback + '(' + data + ');';
    
            res.end(callback);
        } else {
            res.writeHead(200, {
                'Content-Type': 'text/html;charset=utf-8'
            });
            res.end('Hello World
    ');
        }
    });
    
    server.listen('8080');
    

    CORS:当使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会自动给该请求加一个请求头:Origin:当前地址,后台进行一系列处理,如果确定接收请求就在返回结果中加入一个响应头:Access-Control-Allow-Origin:被允许地址...所以CORS的表象是让你觉得和同源的AJAX请求没什么区别,代码完全一样,都是后端进行的处理,服务器设置接收谁就是谁。

    不跨域这样获取当前页面中iframe中的内容:window.frames[0].document完全没有问题。

    跨域iframe:当前页面地址a.blog.com,iframe连接的地址b.blog.com,可以采用降域的方式:document.domain="blog.com",注意这句话要在当前页面和iframe链入的页面中都要写,两方都进行降域最后才能同域。

    主域(一级域名)相同,子域名不同,可通过降域的方式,例如:a.blog.com和b.blog.com,缺点是主域名相同才能使用此方法。

    跨域iframe:虽然不能window.frames[0].document,但是可以window.frames[0].postMessage(str, "*"),*号代表所有域,此页面再window.addEventListener('message', function(e) { e.data }),这里的e.data就是发送的str

    ifame连接的页面的操作:window.addEventListener('message', function(e) { e.data }),window.parent.postMessage(str, "*")

    如果是不同域名,可通过PostMessage的方法。

  • 相关阅读:
    sbt commands
    SBT Assembly
    There is no setter for property named 可能产生的原因!
    JSP页面分页显示数据
    CentOS7配置FTP服务器增强版~(零基础学会FTP配置)
    Windows下将程序打包为安装包(最为简易的方式)
    Linux多线程编程详细解析----条件变量 pthread_cond_t
    在Linux中使用线程
    关于verilog中语句可不可综合
    32位先行进位加法器的实现
  • 原文地址:https://www.cnblogs.com/jiujiaoyangkang/p/8301124.html
Copyright © 2011-2022 走看看