這篇文章主要來介紹一下有關(guān)ajax中異步刷新的知識，以及一個簡單的注冊案例。
我們都知道，異步刷新是ajax中非常重要的一個功能，下面我們先來了解一下關(guān)于異步刷新的方法步驟以及理解。
在這里我們首先說一下關(guān)于$_get請求和$_post請求 。
方法：
open(method,url,async)
send(string)
其中，
規(guī)定請求的類型、url 以及是否異步處理請求。
- method：請求的類型；get 或 post
- url：文件在服務(wù)器上的位置
- async：true（異步）或 false（同步）
將請求發(fā)送到服務(wù)器。
- string：僅用于 post 請求
get請求
方法：
xmlhttp.open("get","ajax_info.txt",true);
xmlhttp.send();
有關(guān) get 請求的其他一些注釋：
- get 請求可被緩存
- get 請求保留在瀏覽器歷史記錄中
- get 請求可被收藏為書簽
- get 請求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
- get 請求有長度限制
- get 請求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)（不修改）
post請求
方法：
xmlhttp.open("post","/try/ajax/demo_post.php",true);
xmlhttp.send();
有關(guān) post 請求的其他一些注釋：
- post 請求不會被緩存
- post 請求不會保留在瀏覽器歷史記錄中
- post 不能被收藏為書簽
- post 請求對數(shù)據(jù)長度沒有要求
總結(jié)一下，就是
get在瀏覽器回退時(shí)是無害的，而post會再次提交請求
get產(chǎn)生的url地址可以被bookmark，而post不可以
get請求會被瀏覽器主動cache，而post不會，除非手動設(shè)置。
get請求只能進(jìn)行url編碼，而post支持多種編碼方式。
get請求參數(shù)會被完整保留在瀏覽器歷史記錄里，而post中的參數(shù)不會被保留。
get請求在url中傳送的參數(shù)是有長度限制的，而post么有。
對參數(shù)的數(shù)據(jù)類型，get只接受ascii字符，而post沒有限制
get比post更不安全，因?yàn)閰?shù)直接暴露在url上，所以不能用來傳遞敏感信息。
get參數(shù)通過url傳遞，post放在request body中。
在下面的案例中我們兩種方法都會用到，大家可以觀察兩者的區(qū)別。
幾個一會兒會用到的知識點(diǎn)：
1、xmlhttp.readystate==4 && xmlhttp.status==200
在這一節(jié)的代碼中用到的格式為
if(xhr.readystate == 4){
if(xhr.status == 200){
var result = xhr.responsetext;
var username_result = document.queryselector("#username_result");
if(result == "ok"){
username_result.innertext ="用戶名可以使用";
}else{
username_result.innertext ="用戶名已經(jīng)被注冊";
}
}
}
那么其中的readystate和status是什么意思呢？
xmlhttp.readystate的值及解釋：
0：請求未初始化（還沒有調(diào)用 open()）。
1：請求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。
2：請求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
3：請求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(yīng)的生成。
4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。
xmlhttp.status的值及解釋：
100——客戶必須繼續(xù)發(fā)出請求
101——客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換http協(xié)議版本
200——交易成功
201——提示知道新文件的url
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——服務(wù)器完成了請求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件
206——服務(wù)器已經(jīng)完成了部分用戶的get請求
300——請求的資源可在多處得到
301——刪除請求數(shù)據(jù)
302——在其他地址發(fā)現(xiàn)了請求數(shù)據(jù)
303——建議客戶訪問其他url或訪問方式
304——客戶端已經(jīng)執(zhí)行了get，但文件未變化
305——請求的資源必須從服務(wù)器指定的地址得到
306——前一版本http中使用的代碼，現(xiàn)行版本中不再使用
307——申明請求的資源臨時(shí)性刪除
400——錯誤請求，如語法錯誤
401——請求授權(quán)失敗
402——保留有效chargeto頭響應(yīng)
403——請求不允許
404——沒有發(fā)現(xiàn)文件、查詢或url
405——用戶在request-line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒有在用戶指定的餓時(shí)間內(nèi)完成請求
409——對當(dāng)前資源狀態(tài)，請求不能完成
410——服務(wù)器上不再有此資源且無進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的content-length屬性請求
412——一個或多個請求頭字段在當(dāng)前請求中錯誤
413——請求的資源大于服務(wù)器允許的大小
414——請求的資源url長于服務(wù)器允許的長度
415——請求資源不支持請求項(xiàng)目格式
416——請求中包含range請求頭字段，在當(dāng)前請求資源范圍內(nèi)沒有range指示值，請求也不包含if-range請求頭字段
417——服務(wù)器不滿足請求expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級服務(wù)器不能滿足請求
合起來
500——服務(wù)器產(chǎn)生內(nèi)部錯誤
501——服務(wù)器不支持請求的函數(shù)
502——服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過載
503——服務(wù)器過載或暫停維修
504——關(guān)口過載，服務(wù)器使用另一個關(guān)口或服務(wù)來響應(yīng)用戶，等待時(shí)間設(shè)定值較長
505——服務(wù)器不支持或拒絕支請求頭中指定的http版本
1xx:信息響應(yīng)類，表示接收到請求并且繼續(xù)處理
2xx:處理成功響應(yīng)類，表示動作被成功接收、理解和接受
3xx:重定向響應(yīng)類，為了完成指定的動作，必須接受進(jìn)一步處理
4xx:客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執(zhí)行
5xx:服務(wù)端錯誤，服務(wù)器不能正確執(zhí)行一個正確的請求
xmlhttp.readystate==4 && xmlhttp.status==200的解釋：請求完成并且成功返回
2、針對ie6及以下的版本瀏覽器的兼容處理
var xhr = null;
if(window.xmlhttprequest){
xhr = new xmlhttprequest();
}
else{
xhr = new activexobject("microsoft.xmlhttp")
}
這里都是固定寫法，可以不用記，甚至在代碼中可以不寫
3、onblur事件
onblur 事件會在對象失去焦點(diǎn)時(shí)發(fā)生。
username.onblur = function(){}
意思就是當(dāng)鼠標(biāo)光標(biāo)從當(dāng)前目標(biāo)上離開并且點(diǎn)擊了別的地方，則會執(zhí)行function中的操作。
操作演示
如果我們輸入的信息合法，且在數(shù)據(jù)庫中查詢后可以使用
如果我們輸入的信息在數(shù)據(jù)庫中已經(jīng)有了，比如昵稱已被使用或手機(jī)號已被使用
當(dāng)然在這里我們并沒有使用數(shù)據(jù)庫，而是在php代碼中使用了if...else語句進(jìn)行簡單的判斷。
接下來我們來看最重要的----代碼部分
html代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wellfancy</title>
<script type="text/javascript">
window.onload = function(){
var username = document.queryselector("#username");
var email = document.queryselector("#email");
var phone = document.queryselector("#phone");
username.onblur = function(){
var usernamevalue = username.value;
//將usernamevalue提交給服務(wù)器，由服務(wù)器進(jìn)行唯一性校驗(yàn)
//1、創(chuàng)建對象 兼容處理（針對ie6及以下，可以不寫）
var xhr = null;
if(window.xmlhttprequest){
xhr = new xmlhttprequest();
}
else{
xhr = new activexobject("microsoft.xmlhttp")
}
//2、準(zhǔn)備發(fā)送,注意這里用的是get方法，因?yàn)楹蠖说膒hp文件在這里用的是get，如果后端工程師用的是post方法，這里則換成post
xhr.open("get","./server1/checkusername.php?uname=" + usernamevalue,true);
//3、執(zhí)行發(fā)送
xhr.send(null);
//制定回調(diào)函數(shù)
xhr.onreadystatechange = function (){
//注意這里是固定寫法
if(xhr.readystate == 4){
if(xhr.status == 200){
var result = xhr.responsetext;
//下面做局部刷新
var username_result = document.queryselector("#username_result");
if(result == "ok"){
username_result.innertext ="用戶名可以使用";
}else{
username_result.innertext ="用戶名已經(jīng)被注冊";
}
}
}
};
};
email.onblur = function(){
var emailvalue = email.value;
var xhr = null;
if(window.xmlhttprequest) {
xhr = new xmlhttprequest();
} else {
xhr = new activexobject("microsoft.xmlhttp");
}
var param = "e=" + emailvalue;
xhr.open("post","./server1/checkemail.php",true);
xhr.setrequestheader("content-type","application/x-www-form-urlencoded");
xhr.send(param);
xhr.onreadystatechange = function(){
if(xhr.readystate == 4) {
if(xhr.status == 200){
var result = xhr.responsetext;
var email_result = document.queryselector("#email_result");
if(result == 0) {
//郵箱可用
email_result.innertext = "郵箱可以使用";
} else {
email_result.innertext = "郵箱不可以使用";
}
}
}
};
};
phone.onblur = function(){
var phonevalue = phone.value;
var xhr = null;
if(window.xmlhttprequest) {
xhr = new xmlhttprequest();
} else {
xhr = new activexobject("microsoft.xmlhttp");
}
xhr.open("post","./server1/checkphone.php",true);
var params = "phonenumber="+phonevalue;
xhr.setrequestheader("content-type","application/x-www-form-urlencoded");
xhr.send(params);
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if(xhr.status == 200){
//xhr.responsetext就是一個字符串
var result = xhr.responsetext;
//希望將result這樣的一個字符串轉(zhuǎn)化為對象，方便我們獲取里面的一些值
result = json.parse(result);
var phone_result = document.queryselector("#phone_result");
if(result.status == 0) {
//代表手機(jī)號碼可用
phone_result.innertext = result.message.tips + "," + result.message.phonefrom;
} else if(result.status == 1) {
//代表手機(jī)號碼不可用
phone_result.innertext = result.message;
}
}
}
};
};
};
</script>
</head>
<body>
<h1>注冊界面</h1>
<form action="">
用戶名：<input type="text" id="username"><span id="username_result"><br>
郵箱：<input type="text" id="email"><span id="email_result"><br>
手機(jī)號碼： <input type="text" id="phone"><span id="phone_result"><br>
</form>
</body>
</html>
php代碼部分：
1、checkusername部分：
<?php
$username = $_get["uname"];
if($username == 'wellfancy') {
echo "error";
} else {
echo "ok";
}
?>
2、checkemail部分
<?php
$email = $_post["e"];
if($email == 'wellfancy@qq.com') {
echo 1;
} else {
echo 0;
}
?>
3、checkphone部分
<?php
$phone = $_post["phonenumber"];
if ($phone == '110') {
echo '{"status":1,"message":"手機(jī)號已被使用"}';
} else {
echo '{"status":0,"message":{"tips":"手機(jī)號可用","phonefrom":"中國電信"}}';
}
?>
這樣一個關(guān)于ajax異步刷新的簡易案例就完成了，是不是通俗易懂呢？（滑稽）
以上就是ajax異步刷新功能及簡單案例的詳細(xì)內(nèi)容，更多關(guān)于ajax的資料請關(guān)注碩編程其它相關(guān)文章！
學(xué)習(xí)AJAX