Ajax實(shí)現(xiàn)的效果

????? 究竟Ajax能實(shí)現(xiàn)什么功能呢？今天下午學(xué)習(xí)了一下Ajax，現(xiàn)在跟大家分享一下我的學(xué)習(xí)心得。Ajax是什么？工作機(jī)制又是什么？可能不大準(zhǔn)確，只是我個(gè)人看了視頻學(xué)習(xí)后的一點(diǎn)點(diǎn)看法。

????? Ajax能實(shí)現(xiàn)什么效果？

????? 我舉一個(gè)最簡(jiǎn)單的一個(gè)例子，當(dāng)我們要在某個(gè)網(wǎng)站注冊(cè)時(shí)，填寫昵稱時(shí)，往往會(huì)出現(xiàn)“這個(gè)昵稱已經(jīng)被使用”。其實(shí)這個(gè)就是通過Ajax技術(shù)來實(shí)現(xiàn)的。就是用戶還沒有提交時(shí)，就會(huì)給返回信息。這就是Ajax。

這是關(guān)于Form表單的事件觸發(fā) 1 $(function(){2 var error=new Array();3 $('input[name="username"]').blur(function(){4 var username=$(this).val();5 $.get('__URL__/checkName',{'username':username},function(data){6 if(data=='不允許'){7 error['username']=1;8 $('input[name="username"]').after('<p id="umessage" style="color:red">該用戶名已經(jīng)注冊(cè)</p>');9 }else{ 10 error['username']=0; 11 $('#umessage').remove(); 12 } 13 }); 14 });

?

這是注冊(cè)界面的form表單 1 <form action='__URL__/doReg' method='post' name='myForm'>2 用 戶 名：<input type='text' name='username'/><br/>3 密　　碼：<input type='password' name='password'/><br/>4 確認(rèn)密碼：<input type='password' name='repassword'/><br/>5 性　　別：<input type='radio' name='sex' value='1' class='radio'/>男6 <input type='radio' name='sex' value='0' class='radio'/>女<br/>7 驗(yàn) 證 碼：<input type='text' name='code'/>8 <Message:code width='30' height='30' /> 9 <br/> 10 <img src='__PUBLIC__/Images/register.gif' class='register'/> 11 <img src='__PUBLIC__/Images/reset.gif' class='reset'/> 12 </form>

???? ?Ajax的實(shí)現(xiàn)原理？（局部刷新）

??? ? Ajax直覺認(rèn)識(shí)：我們發(fā)送一個(gè)請(qǐng)求，但是這個(gè)請(qǐng)求比較特殊它是異步的，也就是說客戶端是不會(huì)感覺到的。在發(fā)送這個(gè)請(qǐng)求的時(shí)候我們綁定了一個(gè)事件，這個(gè)事件會(huì)監(jiān)控我們發(fā)送請(qǐng)求的狀態(tài)，并且每次狀態(tài)改變都會(huì)觸發(fā)，所以我們就可以根據(jù)不同的狀態(tài)讓他執(zhí)行不同的操作。請(qǐng)求到達(dá)服務(wù)器端的后服務(wù)器端根據(jù)相應(yīng)的請(qǐng)求返回對(duì)應(yīng)的信息，這個(gè)返回信息我們可以取得并且是異步得到，不會(huì)引起客戶端刷新。既然在上面已經(jīng)綁定了監(jiān)控狀態(tài)變化的事件，我們就可以在那里首先做好在得到返回信息要做的處理（當(dāng)然如果失敗也會(huì)有相應(yīng)的狀態(tài)我們也會(huì)做出相應(yīng)的處理），我們?cè)谔幚碇械玫椒祷匦畔⑼ㄟ^javascript在客戶端做相應(yīng)操作即可。

????? 以前對(duì)Ajax的錯(cuò)誤理解，以為不用到數(shù)據(jù)庫(kù)中操作，其實(shí)仍然是需要到數(shù)據(jù)庫(kù)中去操作。

????? Ajax扮演者一個(gè)中間人的角色，對(duì)應(yīng)用在前臺(tái)提交的數(shù)據(jù)，在用戶沒有察覺“悄悄地”把數(shù)據(jù)送給Ajax，也就是上面所說的觸發(fā)事件，在觸發(fā)事件函數(shù)里面，把獲取到的用戶數(shù)據(jù)，通過與數(shù)據(jù)庫(kù)鏈接后的數(shù)據(jù)匹對(duì)，看是否用戶名是否已經(jīng)存在了。

??? 用戶前臺(tái)數(shù)據(jù)---------Ajax-----------------數(shù)據(jù)庫(kù)（此時(shí)不用提交即可局部刷新）

轉(zhuǎn)載于:https://www.cnblogs.com/MarchThree/p/3734714.html

總結(jié)

以上是生活随笔為你收集整理的ajax检查用户名的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。