Ajax實現(xiàn)的效果

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

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

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

這是關于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)注冊</p>');9 }else{ 10 error['username']=0; 11 $('#umessage').remove(); 12 } 13 }); 14 });

?

這是注冊界面的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 確認密碼：<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 驗 證 碼：<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的實現(xiàn)原理？（局部刷新）

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

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

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

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

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

總結(jié)

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

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