前言
每一個人在學(xué)習(xí)JavaScript中都會有一道坎，那便是今天的主題：Ajax驹溃。
一年前含鳞，我真的時候我才接觸了這個東西影锈，但是覺得真的蠻難的，不是很理解這其中的原理蝉绷。
直到今年我才有寫過涉及Ajax的代碼
知其所以然
首先鸭廷，先解釋一下，為什么出現(xiàn)AJAX熔吗？很久很久以前辆床，在表單驗證的過程中，都必須按下提交按鈕
才能將數(shù)據(jù)進(jìn)行后臺驗證桅狠，所以造成的一個結(jié)果就是：萬一這個用戶名是注冊過的讼载，頁面會自動刷新
轿秧，所有信息都要重新填寫一遍；所以為了防止不斷的刷新咨堤、驗證菇篡，拿起鍵盤砸電腦的行為。Ajax出現(xiàn)了吱型。
Ajax是Asynchronous JavaScript and XML縮寫逸贾。這一技術(shù)能向服務(wù)器請求數(shù)據(jù)而無需刷新頁面，當(dāng)然
會帶來良好的用戶體驗津滞。
Ajax的核心是JavaScript中的一個對象XMLHttpRequest,該對象幫我們將數(shù)據(jù)發(fā)往服務(wù)器和解析服務(wù)器響應(yīng)。
當(dāng)然灼伤，這個對象有一定的兼容問題触徐，只要是IE7+才能使用我以下的原生方法，現(xiàn)在你也不用考慮這么多了狐赡，你可以使用jQuery
封裝好的ajax方法撞鹉。
以下是原生方法：
var XHR = new XMLHttpRequest();
都說了，其核心就是這個對象颖侄。想將數(shù)據(jù)發(fā)往后臺處理鸟雏，我們就要創(chuàng)建一個XMLHttpRequest幫助我們造一條能通完后臺的路。
這個對象上有許多屬性和方法览祖，主要用到兩個方法孝鹊。
open方法
open(method,url,async)
- methd 請求所用的HTTP方法。如果不能理解展蒂，就想想表單提交當(dāng)中是不是也有同樣的屬性又活，是一樣。
- url 該請求所要訪問的URL锰悼。就是要將數(shù)據(jù)提交到的目的地柳骄。
- async 這是一個布爾參數(shù)。true（異步）false（同步）箕般。當(dāng)然你要使用Ajax時這里一定要
true耐薯。
send方法
send(string)
- 將請求提交到服務(wù)器
- string 僅用于POST請求
你要使用該對象實現(xiàn)同步的方法也是可以的。
// HTML 代碼
// <div id="test"></div>
XHR.opend("get","ajax_test.php",false);
XHR.send(); // 執(zhí)行到這里的時候丝里，整個頁面卡住等待服務(wù)器的響應(yīng)
doucument.getElementById("test").innerHTML = XHR.responseText
// PHP代碼
// echo "我是服務(wù)器返回的文字"
onreadystatechange 事件
我們整個Ajax要做就是：將數(shù)據(jù)發(fā)送到服務(wù)器曲初，服務(wù)器在響應(yīng)回來響應(yīng)的數(shù)據(jù)進(jìn)行處理。
然而丙者，我們怎么樣才能得到監(jiān)聽響應(yīng)呢复斥？
因為XMLHttpRequest狀態(tài)都由readyState記錄著，每一次改變都會觸發(fā)onreadystatechange械媒。
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 200){
doucument.getElementById("test").innerHTML = XHR.responseText
}
}
補(bǔ)：還記得當(dāng)初上過的計算機(jī)網(wǎng)絡(luò)嗎目锭？TCP連接是經(jīng)歷了三次握手建立起來的评汰。每一次
的握手，在報文里有一部分字段信息來說明當(dāng)前連接情況痢虹。同理被去，XMLHttpRequest的readyState
屬性記錄著其的狀態(tài)。而readyState的每一次的改變奖唯，都會觸發(fā)onreadystatechange
事件惨缆。
XMLHttpRequest三個重要屬性(補(bǔ))
-
onreadystatechange:事件（存儲函數(shù)），每當(dāng)readyState屬性改變時丰捷，就會調(diào)用該函數(shù)坯墨。 -
readyState:XMLHttpRequest的狀態(tài)。從0到4發(fā)生變化病往。
- 0：請求未初始化
- 1：服務(wù)器鏈接已建立
- 2：請求已接收
- 3：請求處理中
- 4：請求已完成(響應(yīng)就緒)
-
status:響應(yīng)狀態(tài)碼
- 200 ： "OK"
- 404 : "not found"
總結(jié)
使用Ajax就是在頁面刷新的狀態(tài)下捣染，與服務(wù)器進(jìn)行數(shù)據(jù)的交流。
// 原生
var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 4){
doucument.getElementById("test").innerHTML = XHR.responseText
}
}
// GET
XHR.open("GET","ajax_test.php?name=baiji",true)
XHR.send()
// POST
XHR.open("POST","ajax_test.php",true)
XHR.setRequestHeader("Content-Type","application/xxx-form-urlencoded")
XHR.send(name=baiji)
當(dāng)然你也可自己封裝ajax函數(shù)或者使用jQuery的ajax
/*
先定義調(diào)用方式
ajax({
url:"getData.php",
type:"get",
data:{
name:"baiji"
},
success:fn,
error:fn
})
*/
function ajax(opts){
var XHR =new XMLHttpRequest();
XHR.onreadystatechange = function(){
if(XHR.readyState == 4){
if(XHR.status == 200){
opts.success(XHR.responseText)
}else{
opts.error();
}
}
}
var dataStr = "";
for(var key in opts.data){
dataStr += key+"="+opts.data[key]+"&";
}
dataStr = dataStr.substring(0,dataStr.length-1);
var type = opts.type.toLowerCase();
if(type === "get"){
XHR.open(type,opts.url+"?"+dataStr,true);
XHR.send();
}
if(type === "post"){
XHR.open(type,opts.url,true);
XHR.setRequestHeader("Content-Type":"application/xxx-form-urlencoded");
XHR.send(dataStr);
}
}
當(dāng)然你可以選擇最簡單的方便的jQuery停巷，更多用法請自行查看API耍攘。
$.ajax({
type:"GET"，
url:"getData.php"
})
上述都是我自己理解的Ajax畔勤，因為一直沒有很好的狀態(tài)去做項目或者也沒有什么好的項目讓自己用點心去做蕾各。期望自己調(diào)整好狀態(tài)吧，我現(xiàn)在回頭看看才發(fā)現(xiàn)寫完這篇博客庆揪，一天的書有沒有看啦Ｊ角！嚷硫！
本文章著作權(quán)歸白小霽所有检访，轉(zhuǎn)載須說明來源
