Ajax實現的效果

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

????? Ajax能實現什么效果？

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

這是關于Form表單的事件觸發 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">該用戶名已經注冊</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的實現原理？（局部刷新）

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

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

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

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

轉載于:https://www.cnblogs.com/MarchThree/p/3734714.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。