jquery的ajax兩種寫法

 ajax是google第一個在web開發中運用的技術，由於其良好的客戶體驗而致使了在web開發中風靡全球，ajax全名是asynchronous javascripy and xml,核心思想就是局部刷新。

如今不少Web開發中都是用jquery封裝好的ajax，jquery的ajax有兩種寫法：

示範頁面：

<div  class="formBox rebackPwd">
   <form action="repwd.do?method=sendCode" name="sure" method="post">
   <div class="formList">
      <p><label>登陸驗證碼：</label>
      <input id="cCheckCode" type="text" class="ipt" onblur="checkyzm();" maxlength="4"/>
       <img id="tokenImg" src="<%=basePath%>/getTOKEN.do" />
       <span><a href="javascript:refImg();">看不清楚，換一張</a></span>
      </p>
    <p class="prompt"><span id="sp3"></span></p>
</div>
<div class="formList">
   <p><label>註冊的郵箱：</label>
   <input id="userMail" name="userMail" type="text" maxlength="50" class="ipt"  onblur="checkMail();" />
  </p>
</div>
 <div class="formList">
   <p class="prompt" style="height:20px;"> <span id="sp1"></span></p>
   <p class="thg2"><a href="javascript:getNewCode();" class="btn6 w100">獲取新密碼</a></p>	
 </div>			
</form> </div>

第一種是省略的寫法（舉個例子，好比咱們登陸網站的時候須要輸入驗證碼這就是用ajax實現的，示例代碼）： 

//對登錄驗證碼進行非空驗證
            var validatCode=false;
                    function checkyzm(){
                var checkCode=$("#cCheckCode").val();
                $("#sp3").text("");	
			    if( checkCode== ""){
				    $("#sp3").text("* 請輸入驗證碼");	  
				    validatCode=false;  
				    $("#sp3").focus();
			    }
			    else{
			    	var params="method=checkCode&code="+checkCode;
                    var url1 = "<%=basePath%>login.do";
                    $.post(url1,params,function(meg){
                        var megs=eval(meg);           
                        if(megs=="0")
                        {
                            $("#sp3").text("* 驗證碼不正確");
                            validatCode=false;
                        }else{
                    	    validatCode=true;
                        }                   
                    });
	        }		    
            }

不少程序員都喜歡用這種的寫法，由於這種寫法簡單明瞭，可是嚴格來講，這種寫法是不可取的。由於這種寫法只能處理服務器返回的正確值。可是當服務器返回報錯的值時候，它就處理不了。因此通常嚴格的開發經理都會讓程序員按第二種寫法來寫。

第二種寫法：

//檢查郵箱和登錄驗證碼，若是正確則提交
//(這裏用異步提交，並無用表單提交，規範的寫法，增長了錯誤的時候處理函數)
		function getNewCode()
		{
		   var checkCode=$("#cCheckCode").val();
	            var userMail = $("#userMail").val();		
	           if(checkCode != "" && userMail != "")
		      {
			   checkMail(); //前臺校驗郵箱
			   if(validatCode && mailState)
			   {
			      // alert(22222);
			  var url = "<%=basePath%>repwd.do";
			 var params="method=changMailRegCode&checkCode=" + checkCode + "&userMail=" + userMail;	
		            $.ajax({
			               type: "POST",
			               url: url,
			               dataType:"json",
			               data:params,
			               success:function(resObj){
						    var megs=eval(resObj);
						    if(megs == 0){
							    $("#sp1").html("* 對不起！該郵箱帳戶不存在");
						    }else if(megs == 1){
						    	$("#sp1").html("* 對不起！郵箱未激活，不能重置密碼");
						    }else {
							    art.dialog({
								    content: '新密碼已發送到郵箱，請查看郵件並激活',
								    ok: function () {
								    	this.title('3秒後跳轉到首頁').time(3);
								        window.location.href="index3.jsp";
								    },
								    cancelVal: '關閉',
								    cancel: true //爲true等價於function(){}
								  });
						     }
						  },
						  error: function(XMLHttpRequest, textStatus, errorThrown) {
		                       //alert(XMLHttpRequest.status); //返回500
		                       // alert(XMLHttpRequest.readyState); //返回4
		                       // alert(textStatus); //返回error
		                        if(XMLHttpRequest.status == 500){
		                            art.dialog({
									    content: '獲取新密碼出錯，請聯繫管理員'
									     });
		                            }
		                        }
					    });
			    }
			}
			else
			{  
				art.dialog({
			    time: 2,
			    content: '信息不完整！'
			     });
			}
		}

//判斷郵件格式是否正確
	function checkMail()
	{
	    var userMail=$("#userMail").val();	
	    if(userMail != "")
	    {
	        var valid = /^.+\@[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}$/;
			var flag = valid.test(userMail)
			if(flag == false)
			{
			   $("#sp1").html("郵箱格式不正確");
			   mailState = false ;
			}
			else
			{
			 	$("#sp1").html("");
			    mailState = true ;
			}
		}
		else
		{
			$("#sp1").html("請輸入郵箱");
			mailState = false ;
		}
	}

說白了，其實第二種寫法也就是多了個處理服務器返回錯誤值的函數。這樣就不會當服務器報錯的時候，頁面都沒有提示信息。

有句話說二流的程序員只會處理正確的狀況，一流的程序員纔會考慮出錯的狀況。

其實最完整的寫法是這樣的:

$(document).ready(function() {
            jQuery("#clearCac").click(function() {
                jQuery.ajax({
                    url: "/Handle/Do.aspx",
                    type: "post",
                    data: { id: '0' },
                    dataType: "json",
                    success: function(msg) {
                        alert(msg);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                    complete: function(XMLHttpRequest, textStatus) {
                        this; // 調用本次AJAX請求時傳遞的options參數
                    }
                });
            });
        });

附：JQuery.Ajax之錯誤調試幫助信息   此文比較全面

連接： http://www.cnblogs.com/mybest/archive/2011/12/13/2285730.html