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