1、同源的概念：
只有在兩個網(wǎng)頁的協(xié)議、域名、端口號都相同的情況下，這兩個頁面才是同源的。
2、同源策略限制的能力？
非同源的兩個頁面，不能互相訪問對方設(shè)置的本地存儲數(shù)據(jù)、不能互相操作對方的DOM、不能互相發(fā)送ajax請求。
3、什么是‘跨域’？
在一臺服務(wù)器的頁面中，請求另外一臺服務(wù)器的數(shù)據(jù)。這種行為就是跨域（兩個非同源服務(wù)器互相請求數(shù)據(jù)）。
4、JSONP實現(xiàn)跨域請求
1）JSONP的本質(zhì)：
1、利用標(biāo)簽的src屬性可以加載任意服務(wù)器的接口內(nèi)容的特性，把要請求的跨域服務(wù)器接口設(shè)置在該src屬性中，并憑借一個回調(diào)函數(shù)作為參數(shù)；
2、在服務(wù)器端，收到了該請求后，取出傳進來的函數(shù)名，拼接成函數(shù)執(zhí)行的形式，把前端需要的數(shù)據(jù)設(shè)置在函數(shù)參數(shù)中，一塊返回給前端；
3、 前端在收到了服務(wù)器返回的函數(shù)執(zhí)行代碼后，開始觸發(fā)回調(diào)函數(shù)，再回到函數(shù)中就可以獲取到想要的數(shù)據(jù)了。
// 1、創(chuàng)建script標(biāo)簽
var scriptTag = document.createElement('script');
// 2、設(shè)置標(biāo)簽類型
scriptTag.type = 'text/javascript';
// 3、設(shè)置請求的接口
scriptTag.src = 'http://10.0.153.197:8888/news?callback=getData';
// 4、拼接標(biāo)簽進文檔流
window.onload = function() {
document.head.appendChild(scriptTag);
}
// 5、設(shè)置回調(diào)函數(shù)
function getData (data) {
console.log(data);
}
5、封裝ajax請求
// 參數(shù)情況
// method,url,data
function ajax(method, url, data, callback) {
// 1、創(chuàng)建請求對象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// 2、配置請求參數(shù)并發(fā)送請求
method = method.toUpperCase();
if (method == 'GET') {
xhr.open('GET', url + '?' + data, true);
xhr.send(null);
} else if (method == 'POST') {
xhr.open('POST', url, true);
xhr.send(data);
} else {
console.error('請傳入合法的請求方式');
}
// 3、監(jiān)聽狀態(tài)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 向外返回服務(wù)器的數(shù)據(jù)
// 根據(jù)responseXML屬性的是是否為空推斷出數(shù)據(jù)格式
// xhr.resopnseXML為null，表示請求的是json數(shù)據(jù)，否則，請求的是xml數(shù)據(jù)
if (!xhr.responseXML) {
callback(xhr.responseText);
} else {
callback(xhr.responseXML);
}
}
}
}
注:不能在引入封裝的AJAX請求的script標(biāo)簽中直接調(diào)用
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
ajax('get', 'http://127.0.0.1:8020/day05/car.json', '',cb);
function cb (data) {
console.log(data);
}
</script>
6、解析json數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function () {
// 請求服務(wù)器中3.json數(shù)據(jù)
ajax('GET','3.json','', getData);
function getData(data) {
//1、 json格式轉(zhuǎn)換為對象格式
var dataObj = JSON.parse(data);
// console.log(dataObj);
// 2、拿到新聞所在的數(shù)組
var newsArr = dataObj.news;
// console.log(newsArr);
///3、遍歷數(shù)組獲取到新聞對象
for (var index in newsArr) {
var news = newsArr[index];
console.log(news);
//4、 獲取到對象中保存的新聞標(biāo)題和新聞描述字符串
var titleStr = news.title;
var disStr = news.discription;
// console.log(titleStr + disStr);
// 5、數(shù)據(jù)展示
//6、 創(chuàng)建標(biāo)題標(biāo)簽
var h1Tag = document.createElement('h1');
var h3Tag = document.createElement('h3');
// 7、給標(biāo)簽分別賦值
h1Tag.innerHTML = titleStr;
h3Tag.innerHTML = disStr;
//8、 把標(biāo)簽拼接進文檔流
var newsTag = document.querySelector('#news');
newsTag.appendChild(h1Tag);
newsTag.appendChild(h3Tag);
}
}
}
</script>
</head>
<body>
<!--要聞-->
<div id="news"></div>
</body>
</html>
注：//解析同樣的數(shù)據(jù)，XML占的帶寬比json大。用戶流量耗損大，加載速度慢
