Ajax異步刷新功能及簡單案例
這篇文章主要來介紹一下有關(guān)ajax中異步刷新的知識，以及一個(gè)簡單的注冊案例。
我們都知道，異步刷新是ajax中非常重要的一個(gè)功能，下面我們先來了解一下關(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ū)別。
幾個(gè)一會兒會用到的知識點(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——?jiǎng)h除請求數(shù)據(jù)
302——在其他地址發(fā)現(xiàn)了請求數(shù)據(jù)
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化
305——請求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請求的資源臨時(shí)性刪除
400——錯(cuò)誤請求，如語法錯(cuò)誤
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——一個(gè)或多個(gè)請求頭字段在當(dāng)前請求中錯(cuò)誤
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)部錯(cuò)誤
501——服務(wù)器不支持請求的函數(shù)
502——服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過載
503——服務(wù)器過載或暫停維修
504——關(guān)口過載，服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來響應(yīng)用戶，等待時(shí)間設(shè)定值較長
505——服務(wù)器不支持或拒絕支請求頭中指定的HTTP版本
1xx:信息響應(yīng)類，表示接收到請求并且繼續(xù)處理
2xx:處理成功響應(yīng)類，表示動作被成功接收、理解和接受
3xx:重定向響應(yīng)類，為了完成指定的動作，必須接受進(jìn)一步處理
4xx:客戶端錯(cuò)誤，客戶請求包含語法錯(cuò)誤或者是不能正確執(zhí)行
5xx:服務(wù)端錯(cuò)誤，服務(wù)器不能正確執(zhí)行一個(gè)正確的請求
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就是一個(gè)字符串
var result = xhr.responseText;
//希望將result這樣的一個(gè)字符串轉(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"></span><br>
郵箱：<input type="text" id="email"><span id="email_result"></span><br>
手機(jī)號碼： <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ī)號已被使用"}';
} else {
echo '{"status":0,"message":{"tips":"手機(jī)號可用","phonefrom":"中國電信"}}';
}
?>
這樣一個(gè)關(guān)于ajax異步刷新的簡易案例就完成了，是不是通俗易懂呢？（滑稽）
以上就是Ajax異步刷新功能及簡單案例的詳細(xì)內(nèi)容，更多關(guān)于Ajax的資料請關(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),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
ASP.NET與Ajax的實(shí)現(xiàn)方式小總結(jié)
Ajax 應(yīng)該不是一項(xiàng)技術(shù)，是一種思想而已，跟 ASP.NET 以及其它 Web 開發(fā)語言沒有什么太大關(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ù)覽的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狝jax 上傳圖片并預(yù)覽的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
Ajax與JSON的一些學(xué)習(xí)總結(jié)
Ajax技術(shù)的核心是XMLHttpRequest對象（簡稱XHR），可以通過使用XHR對象獲取到服務(wù)器的數(shù)據(jù)，然后再通過DOM將數(shù)據(jù)插入到頁面中呈現(xiàn)。雖然名字中包含XML，但Ajax通訊與數(shù)據(jù)格式無關(guān)，所以我們的數(shù)據(jù)格式可以是XML或JSON等格式2012-08-08
常利用AJAX寫一些頁面無刷新的內(nèi)容獲取頁面，這種方式很快捷也很方便，但其中有一個(gè)問題，就是如果兩次提交的參數(shù)相同時(shí)，返回的內(nèi)容只返回上次獲取的內(nèi)容，如果我們在第一次修改了參數(shù)，第二次再次調(diào)用卻會發(fā)現(xiàn)頁面根本沒有改變。2008-09-09
Ajax與mysql數(shù)據(jù)交互實(shí)現(xiàn)留言板功能
最近自己做了一個(gè)小demo，實(shí)現(xiàn)了Ajax與MySQL的數(shù)據(jù)交互，js部分用的是jq，后臺用的是PHP，數(shù)據(jù)庫是mysql，下面通過本文給大家詳細(xì)介紹下2016-12-12
基于CORS實(shí)現(xiàn)WebApi Ajax 跨域請求解決方法
這篇文章主要介紹了基于CORS實(shí)現(xiàn)WebApi Ajax 跨域請求解決方法,需要的朋友可以參考下2017-08-08
Ajax 由 HTML、JavaScript™ 技術(shù)、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。對于Ajax，最核心的一個(gè)對象是XMLHttpRequest，所有的ajax操作都離不開對這個(gè)對象的操作。2008-12-12
這篇文章主要為大家詳細(xì)介紹了Ajax 異步加載，什么是Ajax 異步加載，如何實(shí)現(xiàn)Ajax 異步加載，感興趣的小伙伴們可以參考一下2016-08-08