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>

注：學習筆記

AJAX-同源策略 跨域访问

AJAX-同源策略跨域访问