同源函数

同源函数： 两个不同的网站互相访问同源策略限制的内容；
设置同源策略的目的 ：保护用户数据安全，防止信息被恶意页面获取到；
如何确定两个页面是同源页面：
三个相同:
协议相同：http：// 或者 https：//
域名相同 ： 网址；
端口号相同 ： 80端口；
例：

Paste_Image.png

同源策略的限制范围：

Paste_Image.png

不是同源策略的两个网页互相访问时，有两个方法：
（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);
    }
    
}

}```