• 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的方法。

  • 相关阅读:
    leetcode 48. Rotate Image
    leetcode 203. Remove Linked List Elements 、83. Remove Duplicates from Sorted List 、82. Remove Duplicates from Sorted List II(剑指offer57 删除链表中重复的结点) 、26/80. Remove Duplicates from Sorted ArrayI、II
    leetcode 263. Ugly Number 、264. Ugly Number II 、313. Super Ugly Number 、204. Count Primes
    leetcode 58. Length of Last Word
    安卓操作的一些问题解决
    leetcode 378. Kth Smallest Element in a Sorted Matrix
    android studio Gradle Build速度加快方法
    禁用gridview,listview回弹或下拉悬停
    Android Studio找不到FragmentActivity类
    安卓获取ListView、GridView等滚动的距离(高度)
  • 原文地址:https://www.cnblogs.com/jiujiaoyangkang/p/8301124.html
Copyright © 2020-2023  润新知