文章詳情頁(yè)

Ajax異步刷新功能及簡(jiǎn)單案例

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

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)度沒有要求

總結(jié)一下，就是

GET在瀏覽器回退時(shí)是無害的，而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沒有限制
GET比POST更不安全，因?yàn)閰?shù)直接暴露在URL上，所以不能用來傳遞敏感信息。
GET參數(shù)通過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)求未初始化（還沒有調(diào)用 open()）。
1：請(qǐng)求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）。
2：請(qǐng)求已發(fā)送，正在處理中（通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒有完成響應(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)瀏覽過的文件
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——建議客戶訪問其他URL或訪問方式
304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化
305——請(qǐng)求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請(qǐng)求的資源臨時(shí)性刪除

400——錯(cuò)誤請(qǐng)求，如語法錯(cuò)誤
401——請(qǐng)求授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——請(qǐng)求不允許
404——沒有發(fā)現(xiàn)文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖，請(qǐng)求資源不可訪問
407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒有在用戶指定的餓時(shí)間內(nèi)完成請(qǐng)求
409——對(duì)當(dāng)前資源狀態(tài)，請(qǐng)求不能完成
410——服務(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)沒有range指示值，請(qǐng)求也不包含If-Range請(qǐng)求頭字段
417——服務(wù)器不滿足請(qǐng)求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級(jí)服務(wù)器不能滿足請(qǐng)求

合起來

500——服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤
501——服務(wù)器不支持請(qǐng)求的函數(shù)
502——服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過載
503——服務(wù)器過載或暫停維修
504——關(guān)口過載，服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來響應(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)求包含語法錯(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)上離開并且點(diǎn)擊了別的地方，則會(huì)執(zhí)行function中的操作。

操作演示

如果我們輸入的信息合法，且在數(shù)據(jù)庫(kù)中查詢后可以使用

如果我們輸入的信息在數(shù)據(jù)庫(kù)中已經(jīng)有了，比如昵稱已被使用或手機(jī)號(hào)已被使用

當(dāng)然在這里我們并沒有使用數(shù)據(jù)庫(kù)，而是在php代碼中使用了if...else語句進(jìn)行簡(jiǎ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)建對(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方法，這里則換成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)被注冊(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)文章！

Ajax

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

排行榜

					
					Vue新搭檔TypeScript快速入門實(shí)踐記錄
10個(gè)示例帶你掌握python中的元組
idea設(shè)置自動(dòng)導(dǎo)入依賴的方法步驟
怎樣用JavaScript實(shí)現(xiàn)觀察者模式
淺析idea生成war包放入tomcat的路徑訪問問題
centos下配置ftp允許以root用戶身份登錄
如何使用IDEA創(chuàng)建MAPPER模板過程圖解
解決idea中debug工具欄消失后如何顯示的問題
python 爬取影視網(wǎng)站下載鏈接
Spring Utils工具類常用方法實(shí)例
ASP.NET Core按用戶等級(jí)授權(quán)的方法
				