jquery的ajax两种写法

2019独角兽企业重金招聘Python工程师标准>>>

 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

转载于:https://my.oschina.net/u/1172409/blog/153588