Ajax異步刷新功能及簡(jiǎn)單案例
這篇文章主要來(lái)介紹一下有關(guān)ajax中異步刷新的知識(shí)，以及一個(gè)簡(jiǎn)單的注冊(cè)案例。
我們都知道，異步刷新是ajax中非常重要的一個(gè)功能，下面我們先來(lái)了解一下關(guān)于異步刷新的方法步驟以及理解。
在這里我們首先說(shuō)一下關(guān)于$_GET請(qǐng)求和$_POST請(qǐng)求 。
方法：
open(method,url,async)
send(string)
其中，
規(guī)定請(qǐng)求的類型、URL 以及是否異步處理請(qǐng)求。
- method：請(qǐng)求的類型；GET 或 POST
- url：文件在服務(wù)器上的位置
- async：true（異步）或 false（同步）
將請(qǐng)求發(fā)送到服務(wù)器。
- string：僅用于 POST 請(qǐng)求
GET請(qǐng)求
方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
有關(guān) GET 請(qǐng)求的其他一些注釋：
- GET 請(qǐng)求可被緩存
- GET 請(qǐng)求保留在瀏覽器歷史記錄中
- GET 請(qǐng)求可被收藏為書簽
- GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
- GET 請(qǐng)求有長(zhǎng)度限制
- GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)（不修改）
POST請(qǐng)求
方法：
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
有關(guān) POST 請(qǐng)求的其他一些注釋：
- POST 請(qǐng)求不會(huì)被緩存
- POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中
- POST 不能被收藏為書簽
- POST 請(qǐng)求對(duì)數(shù)據(jù)長(zhǎng)度沒(méi)有要求
總結(jié)一下，就是
GET在瀏覽器回退時(shí)是無(wú)害的，而POST會(huì)再次提交請(qǐng)求
GET產(chǎn)生的URL地址可以被Bookmark，而POST不可以
GET請(qǐng)求會(huì)被瀏覽器主動(dòng)cache，而POST不會(huì)，除非手動(dòng)設(shè)置。
GET請(qǐng)求只能進(jìn)行url編碼，而POST支持多種編碼方式。
GET請(qǐng)求參數(shù)會(huì)被完整保留在瀏覽器歷史記錄里，而POST中的參數(shù)不會(huì)被保留。
GET請(qǐng)求在URL中傳送的參數(shù)是有長(zhǎng)度限制的，而POST么有。
對(duì)參數(shù)的數(shù)據(jù)類型，GET只接受ASCII字符，而POST沒(méi)有限制
GET比POST更不安全，因?yàn)閰?shù)直接暴露在URL上，所以不能用來(lái)傳遞敏感信息。
GET參數(shù)通過(guò)URL傳遞，POST放在Request body中。
在下面的案例中我們兩種方法都會(huì)用到，大家可以觀察兩者的區(qū)別。
幾個(gè)一會(huì)兒會(huì)用到的知識(shí)點(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)被注冊(cè)";
}
}
}
那么其中的readyState和status是什么意思呢？
xmlhttp.readyState的值及解釋：
0：請(qǐng)求未初始化（還沒(méi)有調(diào)用 open()）。
1：請(qǐng)求已經(jīng)建立，但是還沒(méi)有發(fā)送（還沒(méi)有調(diào)用 send()）。
2：請(qǐng)求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒(méi)有完成響應(yīng)的生成。
4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。
xmlhttp.status的值及解釋：
100——客戶必須繼續(xù)發(fā)出請(qǐng)求
101——客戶要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換HTTP協(xié)議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請(qǐng)求收到，但返回信息為空
205——服務(wù)器完成了請(qǐng)求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過(guò)的文件
206——服務(wù)器已經(jīng)完成了部分用戶的GET請(qǐng)求
300——請(qǐng)求的資源可在多處得到
301——?jiǎng)h除請(qǐng)求數(shù)據(jù)
302——在其他地址發(fā)現(xiàn)了請(qǐng)求數(shù)據(jù)
303——建議客戶訪問(wèn)其他URL或訪問(wèn)方式
304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化
305——請(qǐng)求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請(qǐng)求的資源臨時(shí)性刪除
400——錯(cuò)誤請(qǐng)求，如語(yǔ)法錯(cuò)誤
401——請(qǐng)求授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——請(qǐng)求不允許
404——沒(méi)有發(fā)現(xiàn)文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖，請(qǐng)求資源不可訪問(wèn)
407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒(méi)有在用戶指定的餓時(shí)間內(nèi)完成請(qǐng)求
409——對(duì)當(dāng)前資源狀態(tài)，請(qǐng)求不能完成
410——服務(wù)器上不再有此資源且無(wú)進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的Content-Length屬性請(qǐng)求
412——一個(gè)或多個(gè)請(qǐng)求頭字段在當(dāng)前請(qǐng)求中錯(cuò)誤
413——請(qǐng)求的資源大于服務(wù)器允許的大小
414——請(qǐng)求的資源URL長(zhǎng)于服務(wù)器允許的長(zhǎng)度
415——請(qǐng)求資源不支持請(qǐng)求項(xiàng)目格式
416——請(qǐng)求中包含Range請(qǐng)求頭字段，在當(dāng)前請(qǐng)求資源范圍內(nèi)沒(méi)有range指示值，請(qǐng)求也不包含If-Range請(qǐng)求頭字段
417——服務(wù)器不滿足請(qǐng)求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級(jí)服務(wù)器不能滿足請(qǐng)求
合起來(lái)
500——服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤
501——服務(wù)器不支持請(qǐng)求的函數(shù)
502——服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過(guò)載
503——服務(wù)器過(guò)載或暫停維修
504——關(guān)口過(guò)載，服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來(lái)響應(yīng)用戶，等待時(shí)間設(shè)定值較長(zhǎng)
505——服務(wù)器不支持或拒絕支請(qǐng)求頭中指定的HTTP版本
1xx:信息響應(yīng)類，表示接收到請(qǐng)求并且繼續(xù)處理
2xx:處理成功響應(yīng)類，表示動(dòng)作被成功接收、理解和接受
3xx:重定向響應(yīng)類，為了完成指定的動(dòng)作，必須接受進(jìn)一步處理
4xx:客戶端錯(cuò)誤，客戶請(qǐng)求包含語(yǔ)法錯(cuò)誤或者是不能正確執(zhí)行
5xx:服務(wù)端錯(cuò)誤，服務(wù)器不能正確執(zhí)行一個(gè)正確的請(qǐng)求
xmlhttp.readyState==4 && xmlhttp.status==200的解釋：請(qǐng)求完成并且成功返回
2、針對(duì)IE6及以下的版本瀏覽器的兼容處理
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
這里都是固定寫法，可以不用記，甚至在代碼中可以不寫
3、onblur事件
onblur 事件會(huì)在對(duì)象失去焦點(diǎn)時(shí)發(fā)生。
username.onblur = function(){}
意思就是當(dāng)鼠標(biāo)光標(biāo)從當(dāng)前目標(biāo)上離開(kāi)并且點(diǎn)擊了別的地方，則會(huì)執(zhí)行function中的操作。
操作演示
如果我們輸入的信息合法，且在數(shù)據(jù)庫(kù)中查詢后可以使用
如果我們輸入的信息在數(shù)據(jù)庫(kù)中已經(jīng)有了，比如昵稱已被使用或手機(jī)號(hào)已被使用
當(dāng)然在這里我們并沒(méi)有使用數(shù)據(jù)庫(kù)，而是在php代碼中使用了if...else語(yǔ)句進(jìn)行簡(jiǎn)單的判斷。
接下來(lái)我們來(lái)看最重要的----代碼部分
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)建對(duì)象 兼容處理（針對(duì)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)被注冊(cè)";
}
}
}
};
};
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就是一個(gè)字符串
var result = xhr.responseText;
//希望將result這樣的一個(gè)字符串轉(zhuǎn)化為對(duì)象，方便我們獲取里面的一些值
result = JSON.parse(result);
var phone_result = document.querySelector("#phone_result");
if(result.status == 0) {
//代表手機(jī)號(hào)碼可用
phone_result.innerText = result.message.tips + "," + result.message.phonefrom;
} else if(result.status == 1) {
//代表手機(jī)號(hào)碼不可用
phone_result.innerText = result.message;
}
}
}
};
};
};
</script>
</head>
<body>
<h1>注冊(cè)界面</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>
手機(jī)號(hào)碼： <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":"手機(jī)號(hào)已被使用"}';
} else {
echo '{"status":0,"message":{"tips":"手機(jī)號(hào)可用","phonefrom":"中國(guó)電信"}}';
}
?>
這樣一個(gè)關(guān)于ajax異步刷新的簡(jiǎn)易案例就完成了，是不是通俗易懂呢？（滑稽）
以上就是Ajax異步刷新功能及簡(jiǎn)單案例的詳細(xì)內(nèi)容，更多關(guān)于Ajax的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Ajax驗(yàn)證用戶的唯一性，驗(yàn)證環(huán)境Ajax+Jquery+Json+struts2，感興趣的小伙伴們可以參考一下2016-05-05
laravel ajax curd 搜索登錄判斷功能的實(shí)現(xiàn)
這篇文章主要介紹了laravel ajax curd 搜索登錄判斷功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
ASP.NET與Ajax的實(shí)現(xiàn)方式小總結(jié)
Ajax 應(yīng)該不是一項(xiàng)技術(shù)，是一種思想而已，跟 ASP.NET 以及其它 Web 開(kāi)發(fā)語(yǔ)言沒(méi)有什么太大關(guān)系，這里只是談?wù)?ASP.NET 中目前使用的 Ajax 技術(shù)以及其它一些實(shí)現(xiàn) Ajax 的優(yōu)秀框架。感興趣的朋友跟著小編一起學(xué)習(xí)asp.net與ajax的實(shí)現(xiàn)方式2015-09-09
Ajax 上傳圖片并預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇Ajax 上傳圖片并預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
Ajax與JSON的一些學(xué)習(xí)總結(jié)
Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（簡(jiǎn)稱XHR），可以通過(guò)使用XHR對(duì)象獲取到服務(wù)器的數(shù)據(jù)，然后再通過(guò)DOM將數(shù)據(jù)插入到頁(yè)面中呈現(xiàn)。雖然名字中包含XML，但Ajax通訊與數(shù)據(jù)格式無(wú)關(guān)，所以我們的數(shù)據(jù)格式可以是XML或JSON等格式2012-08-08
常利用AJAX寫一些頁(yè)面無(wú)刷新的內(nèi)容獲取頁(yè)面，這種方式很快捷也很方便，但其中有一個(gè)問(wèn)題，就是如果兩次提交的參數(shù)相同時(shí)，返回的內(nèi)容只返回上次獲取的內(nèi)容，如果我們?cè)诘谝淮涡薷牧藚?shù)，第二次再次調(diào)用卻會(huì)發(fā)現(xiàn)頁(yè)面根本沒(méi)有改變。2008-09-09
Ajax與mysql數(shù)據(jù)交互實(shí)現(xiàn)留言板功能
最近自己做了一個(gè)小demo，實(shí)現(xiàn)了Ajax與MySQL的數(shù)據(jù)交互，js部分用的是jq，后臺(tái)用的是PHP，數(shù)據(jù)庫(kù)是mysql，下面通過(guò)本文給大家詳細(xì)介紹下2016-12-12
基于CORS實(shí)現(xiàn)WebApi Ajax 跨域請(qǐng)求解決方法
這篇文章主要介紹了基于CORS實(shí)現(xiàn)WebApi Ajax 跨域請(qǐng)求解決方法,需要的朋友可以參考下2017-08-08
Ajax+PHP簡(jiǎn)單基礎(chǔ)入門實(shí)例教程
Ajax 由 HTML、JavaScript™ 技術(shù)、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。對(duì)于Ajax，最核心的一個(gè)對(duì)象是XMLHttpRequest，所有的ajax操作都離不開(kāi)對(duì)這個(gè)對(duì)象的操作。2008-12-12
這篇文章主要為大家詳細(xì)介紹了Ajax 異步加載，什么是Ajax 異步加載，如何實(shí)現(xiàn)Ajax 異步加載，感興趣的小伙伴們可以參考一下2016-08-08