Ajax異步刷新功能及簡單案例
這篇文章主要來介紹一下有關(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ù)時使用
- GET 請求有長度限制
- GET 請求只應(yīng)當用于取回數(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在瀏覽器回退時是無害的，而POST會再次提交請求
GET產(chǎn)生的URL地址可以被Bookmark，而POST不可以
GET請求會被瀏覽器主動cache，而POST不會，除非手動設(shè)置。
GET請求只能進行url編碼，而POST支持多種編碼方式。
GET請求參數(shù)會被完整保留在瀏覽器歷史記錄里，而POST中的參數(shù)不會被保留。
GET請求在URL中傳送的參數(shù)是有長度限制的，而POST么有。
對參數(shù)的數(shù)據(jù)類型，GET只接受ASCII字符，而POST沒有限制
GET比POST更不安全，因為參數(shù)直接暴露在URL上，所以不能用來傳遞敏感信息。
GET參數(shù)通過URL傳遞，POST放在Request body中。
在下面的案例中我們兩種方法都會用到，大家可以觀察兩者的區(qū)別。
幾個一會兒會用到的知識點：
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ā)送，正在處理中（通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
3：請求在處理中；通常響應(yīng)中已有部分數(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ù)器完成了請求，用戶代理必須復位當前已經(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——申明請求的資源臨時性刪除
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——客戶端沒有在用戶指定的餓時間內(nèi)完成請求
409——對當前資源狀態(tài)，請求不能完成
410——服務(wù)器上不再有此資源且無進一步的參考地址
411——服務(wù)器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大于服務(wù)器允許的大小
414——請求的資源URL長于服務(wù)器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源范圍內(nèi)沒有range指示值，請求也不包含If-Range請求頭字段
417——服務(wù)器不滿足請求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級服務(wù)器不能滿足請求
合起來
500——服務(wù)器產(chǎn)生內(nèi)部錯誤
501——服務(wù)器不支持請求的函數(shù)
502——服務(wù)器暫時不可用，有時是為了防止發(fā)生系統(tǒng)過載
503——服務(wù)器過載或暫停維修
504——關(guān)口過載，服務(wù)器使用另一個關(guān)口或服務(wù)來響應(yīng)用戶，等待時間設(shè)定值較長
505——服務(wù)器不支持或拒絕支請求頭中指定的HTTP版本
1xx:信息響應(yīng)類，表示接收到請求并且繼續(xù)處理
2xx:處理成功響應(yīng)類，表示動作被成功接收、理解和接受
3xx:重定向響應(yīng)類，為了完成指定的動作，必須接受進一步處理
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 事件會在對象失去焦點時發(fā)生。
username.onblur = function(){}
意思就是當鼠標光標從當前目標上離開并且點擊了別的地方，則會執(zhí)行function中的操作。
操作演示
如果我們輸入的信息合法，且在數(shù)據(jù)庫中查詢后可以使用
如果我們輸入的信息在數(shù)據(jù)庫中已經(jīng)有了，比如昵稱已被使用或手機號已被使用
當然在這里我們并沒有使用數(shù)據(jù)庫，而是在php代碼中使用了if...else語句進行簡單的判斷。
接下來我們來看最重要的----代碼部分
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ù)器進行唯一性校驗
//1、創(chuàng)建對象 兼容處理（針對IE6及以下，可以不寫）
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
//2、準備發(fā)送,注意這里用的是get方法，因為后端的php文件在這里用的是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) {
//代表手機號碼可用
phone_result.innerText = result.message.tips + "," + result.message.phonefrom;
} else if(result.status == 1) {
//代表手機號碼不可用
phone_result.innerText = result.message;
}
}
}
};
};
};
</script>
</head>
<body>
<h1>注冊界面</h1>
<form action="">
用戶名：<input type="text" id="username"><span id="username_result"></span><br>
郵箱：<input type="text" id="email"><span id="email_result"></span><br>
手機號碼： <input type="text" id="phone"><span id="phone_result"></span><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":"手機號已被使用"}';
} else {
echo '{"status":0,"message":{"tips":"手機號可用","phonefrom":"中國電信"}}';
}
?>
這樣一個關(guān)于ajax異步刷新的簡易案例就完成了，是不是通俗易懂呢？（滑稽）
以上就是Ajax異步刷新功能及簡單案例的詳細內(nèi)容，更多關(guān)于Ajax的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
分析用戶行為時,某網(wǎng)頁停留時間可能會是個可參考的數(shù)據(jù) 由后臺分析函數(shù)取一個合理值作為在線時間2008-04-04
要通過ajax保存表單，一切都OK，測試也通過，卻發(fā)現(xiàn)文件沒有上傳成功！然后就有了用 ajax是否可以上傳文件的疑問。2011-01-01
Ajax標簽導航效果(仿網(wǎng)易首頁)...2006-10-10
基于Ajax和forms組件實現(xiàn)注冊功能的實例代碼
本文通過實例代碼給大家分享了基于Ajax和forms組件實現(xiàn)注冊功能,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了ajax的get請求時緩存處理解決方法,詳細分析了常見的四種解決方法,非常具有實用價值,需要的朋友可以參考下2015-02-02
國內(nèi)首發(fā) -- ajax完整功能框架2007-01-01
基于Spring Boot利用 ajax實現(xiàn)上傳圖片功能
這篇文章主要介紹了Spring Boot利用 ajax實現(xiàn)上傳圖片功能,本文圖文實例相結(jié)合，給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
使用$.getJSON實現(xiàn)跨域ajax請求示例代碼
getJSON調(diào)用并獲取遠程的JSON字符串，將其轉(zhuǎn)換為JSON對象，如果成功，則執(zhí)行回調(diào)函數(shù)，下面有個不錯的示例，需要的朋友可以參考下2013-11-11
Ajax 是 Asynchronous JavaScript and XML的縮寫。其優(yōu)點可以減輕服務(wù)器的負擔,按需取數(shù)據(jù),最大程度的減少冗余請求。接下來通過本文給大家介紹Ajax基礎(chǔ)與登入教程，需要的的朋友參考下2017-03-03
今天小編就為大家分享一篇快速解決ajax返回值給外部函數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08