## 同源策略

概述： 同源策略是浏览器的一种安全策略，视为同源是指域名，协议，端口完全相同。只有同源的地址才可以通过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

跨域方法如下：

     <!-- img link script iframe -->

     <!-- 尝试找到一种发送不同源的请求方式 -->

    <!--  校验目的：

     1，能发出去

     2，能收回来

     img 能够得到响应 但是不能得到字符串

     link 能够得到响应 但是会按照css来执行

     script 得到响应会按照 js 语法来执行 -->

     <!-- 所以可以使用这个特点 使用jsonp 来实现跨域信息的获取 -->

     <!-- http://www.zhangsan.com/02_ajax/server/test.php -->

     <img src="https://wx4.sinaimg.cn/mw690/671419afgy1g0ff9kv6zmj21sc2dskjm.jpg">

    <!--  <script id="script1" type="text/javascript" src="template-web.js">

         window.onload =function() {

         var script = document.getElementById('script');

         console.log(1);

         console.log(script);

        };

     </script> -->

     <script type="text/javascript">

         var script =document.createElement('script');

         script.src = "http://www.zhangsan.com/02_ajax/server/test.php";

         document.body.appendChild(script);

         console.log(script);

         function foo(data) {

              console.log(data);

         }

     </script>

 服务端返回: 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>

注：學習筆記

AJAX-同源策略 跨域访问的更多相关文章

  1. JavaScript JSON AJAX 同源策略 跨域请求

    网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...

  2. (转)jquery ajax使用及跨域访问解决办法

    原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...

  3. AJax与Jsonp跨域访问

    一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术 ...

  4. java 设置允许ajax XMLHttpRequest 请求跨域访问

    怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域. 方案1: 使用XMLHttpRequest...  异步请求不能跨域访问,除非要访问的网页响应头信息设置为允许跨域访问. 将网页设置为允许 ...

  5. jQuery发送ajax请求实现跨域访问

    Java代码的话,在返回响应之前调用如下代码中的allowCrossDomainAccess()方法: /** * 允许跨域访问 */ public void allowCrossDomainAcce ...

  6. ajax异步请求/同源策略/跨域传值

    基本概念 Ajax 全称是异步的 JavaScript 和 XML . 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  7. JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求

    JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...

  8. ajax，jsonp跨域访问数据

    访问高德aip天气接口 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  9. 什么是跨域访问，JSON&JSONP

    http://blog.csdn.net/notechsolution/article/details/50394391 更详细的讲解,关于同源策略等: http://www.cnblogs.com/ ...

随机推荐

  1. 为什么使用SLF4J?

      每个Java开发人员都知道日志记录对Java应用的重要性,尤其是对服务端应用,而且其中许多人都已经熟悉了各种记录日志的库,比如java.util.logging,Apache的log4j,logb ...

  2. Spring Cloud 2-RabbitMQ 集成(八)

    Spring Cloud  RabbitMQ  pom.xml application.yml 提供者 消费者 队列配置 单元测试 通过消息队列MQ做为通信中心,这里采用RabbitMQ.安装方参考: ...

  3. 游记-HNOI2019

    Day -1 最后一场考试依旧没有ak(达成成就:\(\mathrm{OI}\) 生涯 AK 次数仅一次) Day 0 听dalao们说现在做题已经没有意义了,不如多口胡几道题,拓展视野 虽然很抗拒但 ...

  4. vscode插件解析-BookMark

    BookMark (书签):在编辑器中标记行并轻松跳转到它们. commands 书签:Toggle   标记/取消标记带书签的行 书签:Jump to Next  将光标向前移动到下面的书签 书签: ...

  5. Chrome浏览器自动填充<input>标签的密码

    问题:登录页面登录时,Chrome浏览器保存了用户名和密码,在其他页面管理其他的账户和密码时,密码框先是显示正确的密码,然后一闪而过被覆盖. 原因:问了技术主管才得知,Chrome浏览器中的,保存用户 ...

  6. spring security 学习一

    1.配置基本的springboot web项目,加入security5依赖,启动项目 浏览器访问,即可出现一个默认的登录页面 2.什么都没有配置 登录页面哪里来的 一般不知从何入手,就看官方文档里是如 ...

  7. OpenCV-Python-图像梯度

    图像梯度 我们知道一阶导数可以用来求极值.把图片想象成连续函数,因为边缘部分的像素值与旁边的像素明显有区别,所以对图片局部求极值,就可以得到整幅图片的边缘信息.不过图片是二维的离散函数,导数就变成了差 ...

  8. 用Python写一个zip文件的密码破解程序

    最近在读<python绝技:运用python成为顶级黑客>一书,文中有如何运用Python中zipfile自带的方法破解zip文件.短短的十几行代码就将一个程序实现了.下面给出书中所用的代 ...

  9. 第二次JAVA作业

    1 2 3 4

  10. kubernets helm 如何删除tiller

    https://stackoverflow.com/questions/53612553/how-to-uninstall-remove-tiller-from-kubernetes-manually ...