zoukankan      html  css  js  c++  java
  • AJAX-同源策略 跨域访问

    ## 同源策略

    概述: 同源策略是浏览器的一种安全策略,视为同源是指域名,协议,端口完全相同。只有同源的地址才可以通过AJAX方式请求。同源或者不同源说的是两个地址的关系,不同源地址之间请求我们称之为跨域请求。

    即是不同源地址之间,不能发送 AJAX 请求。

    JSONP

    1,JSONP的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

    2,JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据

    类似:

    hehe({q:"123",p:false,s:["12306","12306铁路客户服务中心","12306火车票网上订票官网","12333","12315","12345","12329","12366电子税务局","12366","12333社保查询网"]});

    ###2,寻找一个有效的方法 实现跨域请求

    请求方url:http://www.lisi.com/ajax-02/day02/xinlang.html

    响应方url:http://www.zhangsan.com/02_ajax/server/test.php

    跨域方法如下:

     1     
     2     <!-- img link script iframe -->
     3     <!-- 尝试找到一种发送不同源的请求方式 -->
     4 
     5    <!--  校验目的:
     6     1,能发出去
     7     2,能收回来
     8 
     9     img 能够得到响应 但是不能得到字符串
    10 
    11     link 能够得到响应 但是会按照css来执行
    12 
    13     script 得到响应会按照 js 语法来执行 -->
    14     <!-- 所以可以使用这个特点 使用jsonp 来实现跨域信息的获取 -->
    15 
    16     <!-- http://www.zhangsan.com/02_ajax/server/test.php -->
    17 
    18 
    19     <img src="https://wx4.sinaimg.cn/mw690/671419afgy1g0ff9kv6zmj21sc2dskjm.jpg">
    20 
    21    <!--  <script id="script1" type="text/javascript" src="template-web.js">
    22         window.onload =function() {
    23         var script = document.getElementById('script');
    24         console.log(1);
    25         console.log(script);
    26 
    27        };
    28     </script> -->
    29 
    30     <script type="text/javascript">
    31         
    32         var script =document.createElement('script');
    33         script.src = "http://www.zhangsan.com/02_ajax/server/test.php";
    34         document.body.appendChild(script);
    35         console.log(script);
    36 
    37         
    38         function foo(data) {
    39              console.log(data);
    40         }
    41     </script>
    42 
    43 服务端返回: foo('var a = 123')

    //控制台輸出:var a = 123;

    script: 使用script标签 和 jsonp (利用js代码执行特性)实现跨域。

    ###3,跨域封裝。

    // "https://suggest.taobao.com/sug?q="+keywordValue+"&callback=hehe";
    
    obj = {
        url:"https://suggest.taobao.com/sug",
        data:{q:"123",pwd:"3456"},
        success:function(data) {}
    }
    
    
    function myAjax(obj) {
    
        var defaults = {
            type:"get",
            url:"#",
            data:{},
            success:function(data) {},
            jsonp:"callback",
            jsonpCallBackName: "hehe"
        };
    
        for (var key in obj) {
            defaults[key] = obj[key];
            //如何赋值的?如果defaults 中没有 obj中有key。 一样赋值
        }
    
        var params = "";
        for (var attr in defaults.data) {
            params += attr + "=" + defaults.data[attr] + "&";
    
        }
        if(params) {
            params = params.substring(0,params.length-1);
            defaults.url += "?" + params;
        }
    
        defaults.url += "&"+defaults.jsonp+"="+defaults.jsonpCallBackName;
        console.log(defaults.url);
    
        var script = document.createElement("script");
        script.src = defaults.url;
    
        window[defaults.jsonpCallBackName] = function(data) {
            defaults.success(data);
        }
    
        var head = document.querySelector("head");
        head.appendChild(script);
    }

      調用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>百度提示词---跨域百度数据服务器</title>
        <script type="text/javascript" src="myutis(wangzheng).js"></script>
        <script type="text/javascript">
            window.onload = function() {
                var btn = document.querySelector("#btn");
    
                btn.onclick = function() {
                        
                        var keywordValue =document.querySelector("#keyword").value;
                        console.log(keywordValue);
    
                        myAjax({
                             url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                             data:{wd:keywordValue},
                             //声明所需要的函数,真正执行的函数是响应体返回的
                             success:function(data) {
                                 var liTag = "";
                                console.log(data);
                                 for(var i = 0; i<data.s.length;i++) {
                                     var tempSug = data.s[i];
    
                                     liTag += "<li>" + tempSug + "</li>";
    
                                 }
                                 var ulTag = document.querySelector("ul");
                                 ulTag.innerHTML = liTag;
                             },
                             jsonp:"cb",
                             jsonpCallBackName:"haha"
                         });
                };
            };
        </script>
    </head>
    <body>
        <input type="text" name="" id="keyword" placeholder="请输入关键词">
        <input type="button" name="" id="btn" value="查询">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            
            
        </ul>
    </body>
    </html>

     注:學習筆記

  • 相关阅读:
    kibana We couldn't activate monitoring
    学Redis这篇就够了!
    elasticsearch 官方监控文档 老版但很有用
    java dump 内存分析 elasticsearch Bulk异常引发的Elasticsearch内存泄漏
    Apache Beam实战指南 | 大数据管道(pipeline)设计及实践
    InnoDB一棵B+树可以存放多少行数据?
    函数编程真不好
    面向对象编程灾难
    可能是全网最好的MySQL重要知识点 | 面试必备
    终于有人把elasticsearch原理讲通了
  • 原文地址:https://www.cnblogs.com/xixiaijunjun/p/10422998.html
Copyright © 2011-2022 走看看