同源函數(shù)： 兩個不同的網站互相訪問同源策略限制的內容；
設置同源策略的目的 ：保護用戶數(shù)據(jù)安全背镇，防止信息被惡意頁面獲取到；
如何確定兩個頁面是同源頁面：
三個相同:
協(xié)議相同：http：// 或者 https：//
域名相同 ： 網址棒动；
端口號相同 ： 80端口恋博；
例：
同源策略的限制范圍：
不是同源策略的兩個網頁互相訪問時瘫絮，有兩個方法：
（1）通過后端的服務器去設置（//前端可以不知道）
（2）通過創(chuàng)建動態(tài)的javascript標簽來設置兩個頁面互相訪問
注：javascript中的src中加上callback=函數(shù)名：（鏈接后端）涨冀；
<script type="text/javascript">
/*
同源：當鏈各個接口與的協(xié)議，域名麦萤，端口號都想等時鹿鳖，這兩個接口是同源接口
只要有一個不相等，則是非同源壮莹，不是同源的兩個頁面不能互相訪問本地的緩存翅帜，不能互相修改dom及節(jié)點，不能互相訪問Ajax
*/
//跨域請求數(shù)據(jù)
//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標簽請求外部服務器中的數(shù)據(jù)命满，從而打破（繞開）同源策略對Ajax數(shù)據(jù)請求的限制涝滴。
*/
</script>
封裝jsonp:
<script type="text/javascript">
//jsonp的核心則是動態(tài)添加<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本質：利用動態(tài)創(chuàng)建script屬性可以加載任意文件的特性，通過這個屬性來訪問數(shù)據(jù)接口胶台，（添加一個回調函數(shù)作為參數(shù)）歼疮，而數(shù)據(jù)接口會返回一個函數(shù)名包裹的json數(shù)據(jù)，從而達到獲取跨域數(shù)據(jù)的目的诈唬；
*/
//封裝JSONP
//只能對接get請求
//把創(chuàng)建script標簽的步驟封裝在一個函數(shù)中韩脏；
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铸磅、傳入?yún)?shù)：請求方式赡矢、請求接口地址、請求參數(shù)阅仔、請求成功的回調函數(shù)吹散、請求失敗的回調函數(shù)
function ajaxFun (method, url, data, successFun, failFun) {
// 1、根據(jù)瀏覽器的支持情況創(chuàng)建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請求時丘跌，配置請求參數(shù)袭景，并發(fā)送請求
xhr.open(upperMethod, url+'?'+data, true);
xhr.send(null);
} else if (upperMethod == 'POST') {
// 2.2、請求為post請求闭树，配置請求參數(shù)耸棒，并發(fā)送請求
xhr.open(upperMethod, url, true);
xhr.send(data);
} else {
// 如果傳入的請求方式并不是get或post，則彈出錯誤提示报辱，并關閉函數(shù)的執(zhí)行
//alert('你的請求方式傳錯啦与殃！');
console.error('請求參數(shù)錯誤，必須是get或post的一種');
return;
}
// 3碍现、監(jiān)聽服務器響應幅疼，根據(jù)服務器傳回來的信息調用不同的回調函數(shù)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
successFun(xhr.responseText);
} else if (xhr.readyState == 4) {
failFun('請求失敗');
console.error(xhr.status);
}
}
}```
