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