同源函数： 两个不同的网站互相访问同源策略限制的内容；
设置同源策略的目的 ：保护用户数据安全，防止信息被恶意页面获取到；
如何确定两个页面是同源页面：
三个相同:
协议相同：http：// 或者 https：//
域名相同 ： 网址；
端口号相同 ： 80端口；
例：
同源策略的限制范围：
不是同源策略的两个网页互相访问时，有两个方法：
（1）通过后端的服务器去设置（//前端可以不知道）
（2）通过创建动态的javascript标签来设置两个页面互相访问
注：javascript中的src中加上callback=函数名：（链接后端）；
<script type="text/javascript">
/*
同源：当链各个接口与的协议，域名，端口号都想等时，这两个接口是同源接口
只要有一个不相等，则是非同源，不是同源的两个页面不能互相访问本地的缓存，不能互相修改dom及节点，不能互相访问Ajax
*/
//跨域请求数据
//http://wthrcdn.etouch.cn/weather_mini?city=北京
/*
var xhr =window.XMLHttpRequest? new XMLHttpRequest(): new ActiveXObject('Micrsoft.XMLHTTP'); xhr.open('GET','http://wthrcdn.etouch.cn/weather_mini?city=北京',true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status ==200){
console.log(xhr.responseText);
}
}
*/
/*
解决跨域问题
JSONP：利用js标签请求外部服务器中的数据，从而打破（绕开）同源策略对Ajax数据请求的限制。
*/
</script>
封装jsonp:
<script type="text/javascript">
//jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本
// var script = document.createElement('script');
// script.type="text/javascript";
// script.src ="http://10.0.159.198/data.php?callback=foo";
// document.getElementsByTagName('head')[0].appendChild(script);
/*
jsonp本质：利用动态创建script属性可以加载任意文件的特性，通过这个属性来访问数据接口，（添加一个回调函数作为参数），而数据接口会返回一个函数名包裹的json数据，从而达到获取跨域数据的目的；
*/
//封装JSONP
//只能对接get请求
//把创建script标签的步骤封装在一个函数中；
function createScript(srcString){
var script = document.createElement('script');
script.type = "text/javascript";
script.src = srcString;
document.getElementsByTagName('head')[0].appendChild(script);
}
createScript('http://10.0.159.198/data.php?callback=abc'); // 后台路径
function abc(n){
alert(n.great);
}
</script>```
封装Ajax：
// 1、浏览器适配
// 2、传入参数：请求方式、请求接口地址、请求参数、请求成功的回调函数、请求失败的回调函数
function ajaxFun (method, url, data, successFun, failFun) {
// 1、根据浏览器的支持情况创建XMLHttpRequest对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// 2、判断请求方式的类型
// 把method转换为大写:toUpperCase:先把变量中的字符串拷贝一份出来，然后针对拷贝的那一份修改为大写
// console.log( method.toUpperCase() );
var upperMethod = method.toUpperCase();
if (upperMethod == 'GET') {
// 2.1、请求为get请求时，配置请求参数，并发送请求
xhr.open(upperMethod, url+'?'+data, true);
xhr.send(null);
} else if (upperMethod == 'POST') {
// 2.2、请求为post请求，配置请求参数，并发送请求
xhr.open(upperMethod, url, true);
xhr.send(data);
} else {
// 如果传入的请求方式并不是get或post，则弹出错误提示，并关闭函数的执行
//alert('你的请求方式传错啦！');
console.error('请求参数错误，必须是get或post的一种');
return;
}
// 3、监听服务器响应，根据服务器传回来的信息调用不同的回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
successFun(xhr.responseText);
} else if (xhr.readyState == 4) {
failFun('请求失败');
console.error(xhr.status);
}
}
}```
