前言
每一個(gè)人在學(xué)習(xí)JavaScript中都會(huì)有一道坎，那便是今天的主題：Ajax。
一年前，我真的時(shí)候我才接觸了這個(gè)東西，但是覺(jué)得真的蠻難的，不是很理解這其中的原理。
直到今年我才有寫過(guò)涉及Ajax的代碼
知其所以然
首先，先解釋一下，為什么出現(xiàn)AJAX？很久很久以前，在表單驗(yàn)證的過(guò)程中，都必須按下提交按鈕
才能將數(shù)據(jù)進(jìn)行后臺(tái)驗(yàn)證，所以造成的一個(gè)結(jié)果就是：萬(wàn)一這個(gè)用戶名是注冊(cè)過(guò)的，頁(yè)面會(huì)自動(dòng)刷新
，所有信息都要重新填寫一遍；所以為了防止不斷的刷新、驗(yàn)證，拿起鍵盤砸電腦的行為。Ajax出現(xiàn)了。
Ajax是Asynchronous JavaScript and XML縮寫。這一技術(shù)能向服務(wù)器請(qǐng)求數(shù)據(jù)而無(wú)需刷新頁(yè)面，當(dāng)然
會(huì)帶來(lái)良好的用戶體驗(yàn)。
Ajax的核心是JavaScript中的一個(gè)對(duì)象XMLHttpRequest,該對(duì)象幫我們將數(shù)據(jù)發(fā)往服務(wù)器和解析服務(wù)器響應(yīng)。
當(dāng)然，這個(gè)對(duì)象有一定的兼容問(wèn)題，只要是IE7+才能使用我以下的原生方法，現(xiàn)在你也不用考慮這么多了，你可以使用jQuery
封裝好的ajax方法。
以下是原生方法：
var XHR = new XMLHttpRequest();
都說(shuō)了，其核心就是這個(gè)對(duì)象。想將數(shù)據(jù)發(fā)往后臺(tái)處理，我們就要?jiǎng)?chuàng)建一個(gè)XMLHttpRequest幫助我們?cè)煲粭l能通完后臺(tái)的路。
這個(gè)對(duì)象上有許多屬性和方法，主要用到兩個(gè)方法。
open方法
open(method,url,async)
- methd 請(qǐng)求所用的HTTP方法。如果不能理解，就想想表單提交當(dāng)中是不是也有同樣的屬性，是一樣。
- url 該請(qǐng)求所要訪問(wèn)的URL。就是要將數(shù)據(jù)提交到的目的地。
- async 這是一個(gè)布爾參數(shù)。true（異步）false（同步）。當(dāng)然你要使用Ajax時(shí)這里一定要
true。
send方法
send(string)
- 將請(qǐng)求提交到服務(wù)器
- string 僅用于POST請(qǐng)求
你要使用該對(duì)象實(shí)現(xiàn)同步的方法也是可以的。
// HTML 代碼
// <div id="test"></div>
XHR.opend("get","ajax_test.php",false);
XHR.send(); // 執(zhí)行到這里的時(shí)候，整個(gè)頁(yè)面卡住等待服務(wù)器的響應(yīng)
doucument.getElementById("test").innerHTML = XHR.responseText
// PHP代碼
// echo "我是服務(wù)器返回的文字"
onreadystatechange 事件
我們整個(gè)Ajax要做就是：將數(shù)據(jù)發(fā)送到服務(wù)器，服務(wù)器在響應(yīng)回來(lái)響應(yīng)的數(shù)據(jù)進(jìn)行處理。
然而，我們?cè)趺礃硬拍艿玫奖O(jiān)聽(tīng)響應(yīng)呢？
因?yàn)?code>XMLHttpRequest狀態(tài)都由readyState記錄著，每一次改變都會(huì)觸發(fā)onreadystatechange。
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 200){
doucument.getElementById("test").innerHTML = XHR.responseText
}
}
補(bǔ)：還記得當(dāng)初上過(guò)的計(jì)算機(jī)網(wǎng)絡(luò)嗎？TCP連接是經(jīng)歷了三次握手建立起來(lái)的。每一次
的握手，在報(bào)文里有一部分字段信息來(lái)說(shuō)明當(dāng)前連接情況。同理，XMLHttpRequest的readyState
屬性記錄著其的狀態(tài)。而readyState的每一次的改變，都會(huì)觸發(fā)onreadystatechange
事件。
XMLHttpRequest三個(gè)重要屬性(補(bǔ))
-
onreadystatechange:事件（存儲(chǔ)函數(shù)），每當(dāng)readyState屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。 -
readyState:XMLHttpRequest的狀態(tài)。從0到4發(fā)生變化。
- 0：請(qǐng)求未初始化
- 1：服務(wù)器鏈接已建立
- 2：請(qǐng)求已接收
- 3：請(qǐng)求處理中
- 4：請(qǐng)求已完成(響應(yīng)就緒)
-
status:響應(yīng)狀態(tài)碼
- 200 ： "OK"
- 404 : "not found"
總結(jié)
使用Ajax就是在頁(yè)面刷新的狀態(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)然你可以選擇最簡(jiǎn)單的方便的jQuery，更多用法請(qǐng)自行查看API。
$.ajax({
type:"GET"，
url:"getData.php"
})
上述都是我自己理解的Ajax，因?yàn)橐恢睕](méi)有很好的狀態(tài)去做項(xiàng)目或者也沒(méi)有什么好的項(xiàng)目讓自己用點(diǎn)心去做。期望自己調(diào)整好狀態(tài)吧，我現(xiàn)在回頭看看才發(fā)現(xiàn)寫完這篇博客，一天的書有沒(méi)有看啦?。?！
本文章著作權(quán)歸白小霽所有，轉(zhuǎn)載須說(shuō)明來(lái)源
