文章詳情頁

Ajax異步刷新功能及簡單案例

瀏覽：157日期：2022-06-12 10:48:21

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請求會被瀏覽器主動(dòng)cache，而POST不會，除非手動(dòng)設(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ā)送，正在處理中（通常現(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)類，表示動(dòng)作被成功接收、理解和接受
3xx:重定向響應(yīng)類，為了完成指定的動(dò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方法，這里則換成postxhr.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)文章！

Ajax

上一條：axios和ajax的區(qū)別點(diǎn)總結(jié)下一條：Ajax實(shí)現(xiàn)異步加載數(shù)據(jù)

排行榜

					
					Python生成六萬個(gè)隨機(jī),唯一的8位數(shù)字和數(shù)字組成的隨機(jī)字符串實(shí)例
php strncmp函數(shù)原型源碼分析
讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例
java設(shè)計(jì)模式之Interpreter
html5手機(jī)觸屏touch事件介紹
《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)（一)
ASP.NET Core自定義中間件的方式詳解
IntelliJ IDEA 2020.2.3永久破解激活教程(親測有效)
移動(dòng)端HTML5實(shí)現(xiàn)拍照功能的兩種方法
教你JS更簡單的獲取表單中數(shù)據(jù)(formdata)
python如何寫個(gè)俄羅斯方塊
				