## 同源策略

概述： 同源策略是浏览器的一种安全策略，视为同源是指域名，协议，端口完全相同。只有同源的地址才可以通过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     
      3     
      4  5    
     14     
     15 16     
     17 18 19     20 21    
     29 30     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);}

  調用：

 注：學習筆記