前 言
如今，從事前端方面的程序猿們，如果，不懂一些前后台的數據交互方面的知識的話，估計都不太好意思說自己是程序猿。當然，如今有着許多的框架，都有相對應的前后台數據交互的方法。
而，其中，用得最多的應該蘇算是JQuery的Ajax了。但是，今天，影子向大家介紹的是原生js的Ajax，及跨域請求。
| 一、 JQuery的Ajax |
首先，先回憶下JQuery的Ajax寫法：
$.ajax({
url: ,
type: '',
dataType: '',
data: {
},
success: function(){
},
error: function(){
}
})
| 二、原生JS實現Ajax |
// 第一步： 獲得XMLHttpRequest對象
var ajax = new XMLHttpRequest();
// 第二步： 設置狀態監聽函數
ajax.onreadystatechange = function(){
console.log(ajax.readyState);
console.log(ajax.status);
// 第五步：在監聽函數中，判斷readyState=4 && status=200表示請求成功
if(ajax.readyState==4 && ajax.status==200){
// 第六步： 使用responseText、responseXML接受響應數據，並使用原生JS操作DOM進行顯示
console.log(ajax.responseText);
console.log(ajax.responseXML);// 返回不是XML，顯示null
console.log(JSON.parse(ajax.responseText));
console.log(eval("("+ajax.responseText+")"));
}
}
// 第三步： open一個鏈接
ajax.open("GET","h51701.json",false);//true異步請求，false同步
// 第四步： send一個請求。 可以發送對象和字符串，不需要傳遞數據發送null
ajax.send(null);
注釋：
1. open(method, url, async) 方法需要三個參數:
method：發送請求所使用的方法（GET或POST）；與POST相比，GET更簡單也更快，並且在大部分情況下都能用；然而，在以下情況中，請使用POST請求：
- 無法使用緩存文件（更新服務器上的文件或數據庫）
- 向服務器發送大量數據（POST 沒有數據量限制）
- 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
url：規定服務器端腳本的 URL(該文件可以是任何類型的文件，比如 .txt 和 .xml，或者服務器腳本文件，比如 .asp 和 .php （在傳回響應之前，能夠在服務器上執行任務）)；
async：規定應當對請求進行異步（true）或同步（false）處理；true是在等待服務器響應時執行其他腳本，當響應就緒后對響應進行處理；false是等待服務器響應再執行。
2. send() 方法可將請求送往服務器。
3. onreadystatechange：存有處理服務器響應的函數，每當 readyState 改變時，onreadystatechange 函數就會被執行。
4. readyState：存有服務器響應的狀態信息。
- 0: 請求未初始化
- 1: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒
5. responseText：獲得字符串形式的響應數據。
eval() 和JSON.parse()
另外，給大家介紹兩種解析字符串的方法：
eval() :
eval函數用於將字符串中的JS代碼解析出來並執行！！
當使用eval函數解析JSON字符串時，需 要在函數內部將JSON字符串用()拼接
例如： eval("("+json1+")")
表示eval函數中的字符串不是用於執行，而是要進行字符串解析
即：
eval("("+json1+")") = JSON.parse(json1；
JOSN.parse() :
純粹的將JSON字符串解析為數組或對象；
| 四、 Ajax的跨域請求 |
首先，我們得知道 為什么會有跨域請求這回事，以及什么情況下會有跨域請求？
1 同源策略
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。
它的定義是：
一段腳本向后台請求數據，只能讀取屬於同一協議名、同一主機名、同一端口號下的數據；
所以，請求不同協議名、不同端口號、不同主機名下面的文件時，
將會違背同源策略，無法請求成功，需要進行跨越處理!!
2解決跨域請求的方法
前台無需任何設置，在后台被請求的PHP文件中，寫入一條header。
header("Access-Control-Allow-Origin:*");
--- 表示允許哪些域名請求這個PHP文件，*表示所有域名都允許
JS代碼：
注釋：
其中，url為PHP文件的路徑;
PHP代碼：
結果：
實現步驟：
1、原有src屬性的標簽子帶跨域功能；所以可以使用script標簽的src屬性請求后台數據
<script src="http://127.0.0.1/json.php">< /script>
2、用於src在加載數據成功后，會直接將加載的內容放到script標簽中；
所以，后台直接返回JSON字符串將不能在script標簽中解析。
因此，后台應該返回給前台一個回調函數名，並將JSON字符串作為參數傳入。
后台PHP文件中返回： echo "callback({$json})";
3、前台接收到返回的回調函數，將直接在script標簽中調用。因此，需要聲明這樣一個回調函數，作為請求成功的回調
function callback(data){
alert("請求成功!!");
console.log(data);
}
JS代碼：
PHP文件：
結果：
1、在ajax請求時，設置dataType為"jsonp"；
2、后台返回時，依然需要返回回調函數名，但是，ajax在發送請求時，會默認使用get請求將回調函數名發給后台，
后台$_GET['callback'] 取出函數名：
--- echo "{$_GET['callback']}({$str})";
3、后台返回以后，前台就可以使用ajax的success函數作為成功的回調
--- success : function(data){}
js代碼：
PHP文件：
結果：
當然，后台也可以隨便返回一個函數名，前台只要請求成功，就會自動調用這個函數。類似第二條的②、③步，而不需要本方法的第③步
PHP返回： echo "callback({$str})";
JS代碼： function callback(data){
console.log(data);
}
js代碼：
PHP文件：
結果：
雖然，影子是一名web前端工程師，但是，影子中的覺得關於數據交互這一塊，對我們這一群人來說，要用的地方還是，比較多的；況且，就算是用不到，多一技傍身也是，不錯的；
好了，今天，影子的分享，就到這里結束了，感謝大家的支持!!!!