jQuery与ajax 基础运用

jQuery是一个轻量级js框架，使用方便快捷，更是封装ajax处理方法，如$.load() $.get() $.post() 等

但最常用的方法还是$.ajax()

一、一般的格式为

$.ajax({
     type: 'POST',
  　 async: false, //注意这里要求为Boolean类型的参数，false不能写成'false'不然会被解析成true
     url: url ,
     data: data ,
     dataType:'json',
　   cache：false, //同理
     success: success ,
     error:error,
     dataType: dataType
});

1、type（发送方式 post与get的区别 ）

不同点一：get提交方式会把请求参数以key,value的方式拼接到url中，以至于对提交数据大小有所限制，最长2048个字符；post提交方式是通过HTT请求附件进行，可以实现大量数据传送，在url上不会显示数据，而是保存在web服务器日志中。所以相对而言post提交方式对数据的安全性得到支持。

不同点二：get提交方式会将数据缓存，而post不会。

不同点三：编码方式不同，具体参照链接，详细讲解了get和post方法处理乱码问题。 http://www.cnblogs.com/dyllove98/archive/2013/07/31/3228485.html

　 　如果使用get方法提交，在后台获取值的时候必须使用new String(className.getBytes("ISO8859-1"),"UTF-8")来进行转码才可以不乱码
　　 如果使用post方式提交，在后台不乱码，前提是在web.xml已经配置了编码过滤器，并且在页面中也配置了相应的编码格式

2、async （同步方式 true和false的区别）

async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程），设置async值为false时候，页面进入阻塞模式并出现假死状态，直到这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。

同步例子如：在一个Bootstrap的popover（）运用中动态加载用户消息时details_in_popup（）函数返回参数显示在pop框中，若不设置async为同步最终取不到客户端返回的count值时就返回content值

<script type="text/javascript">
 $('.top-menu #messages').popover({
            html:true,
            placement: 'bottom',
            content: function(){
                var div_id =  "tmp-id-" + $.now();
                return details_in_popup(div_id);
            }
        });
  function details_in_popup(div_id){
	    	 var uid = $("#uid").text();
	    	  var urls = "ajaxMessageCounts.action?identify=1&id=" + uid;
	    	 var contents =  function load_val2(){
	    		    var result='';
	    		    $.ajax({
	    		        dataType:'json',
	    		        url : urls,
	    		        async:false,//这里选择异步为false，直到这个AJAX执行完毕后才会继续运行其他代码
	    		        success : function(data){
	    		        	var count=data.counts;
	    	      	  		$("#messages").attr('data-notification', count);

	    	    				if(count == '0'){
	    	    					result = '<ul><li><br></br><center>暂时没有新消息</center><br></br></li></ul><div class="popover_footer"><a href="searchMessage.action?identify=1&&id='+uid+'&&point=1" target="content">查看全部消息</a></div>';
	    	    				}else{
	    	    					var head1=data.head1;

	    	    					var poTime1=data.poTime1;
	    	    					var mid1 = data.mid1;
	    	    					var poName1=data.poName1;
	    	    					var content1=data.content1;
	    	    					if(count == '1'){
	    	    						result = '<ul><li><a href="showDetail.action?id='+mid1+'&&identify=1&&uid='+uid+'&&point=1" target="content"><img src="backstage/assets/img/gallery/'+head1+'.jpg"><span>'+poTime1+'</span><h4>'+poName1+'</h4>'+content1+'</a></li><ul><div class="popover_footer"><a href="searchMessage.action?identify=1&&id='+uid+'&&point=1" target="content">查看全部消息</a></div>';
	    	    					}
	    	    					if(count == '2'){
	    	    						var head2=data.head2;
		    	    					var poTime2=data.poTime2;
		    	    					var mid2 = data.mid2;
		    	    					var poName2=data.poName2;
		    	    					var content2=data.content2;
		    	    					result = '<ul><li><a href="showDetail.action?id='+mid2+'&&identify=1&&uid='+uid+'&&point=1" target="content"><img src="backstage/assets/img/gallery/'+head1+'.jpg"><span>'+poTime1+'</span><h4>'+poName1+'</h4>'+content1+'</a></li><li><a href="#"><img src="backstage/assets/img/gallery/'+head2+'.jpg"><span>'+poTime2+'</span><h4>'+poName2+'</h4>'+content2+'</a></li></ul><div class="popover_footer"><a href="searchMessage.action?identify=1&&id='+uid+'&&point=1" target="content">查看全部消息</a></div>';
	    	    					}
	    	    				}
	    		        }
	    		    });
	    		    return result;
	    		};
	    	// alert(contents);
	    	 return contents;
	    }
</script>

异步例子如：从用户体验度来思考，加载数据时候提示“loading、、、”

$.ajax(function(){
//省略了一些参数，这里只给出async 和 beforeSend
async: true, //同步请求，默认情况下是异步（true）,若写false将看不到提示内容
beforeSend: function(){
$('#warning').text('loading。。。');
}
});

3、url

url是发送请求的链接地址，可以在URL上拼接请求参数，则提交方式为get如：

var urls = "ajaxMessageCounts.action?identify=1&id=" + uid;

4、data

data可以有几种方式向服务器端发送请求参数：

 function details_in_popup(){
   $.ajax({
         type:'post',
         url:'ajaxMessageCounts.action',
         data:'identity='+identity + 'flag='+flag, //文本方式
         cache:false,
         dataType:'json',
         success:function(data){
         }
     });
 }

function details_in_popup(){
   $.ajax({
         type:'post',
         url:'ajaxMessageCounts.action',
         data:{ identity:'123', flag:'true' }, //json对象
         cache:false,
         dataType:'json',
         success:function(data){
         }
     });
 }

 function details_in_popup(){
   var formParam = $("#form1").serialize();//序列化表单内容为字符串
   $.ajax({
         type:'post',
         url:'ajaxMessageCounts.action',
         data:formParam,
         cache:false,
         dataType:'json',
         success:function(data){
         }
     });
 }

5、dataType
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

6、cache

要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

这里介绍几种防止缓存的方法：

　　1）在客户端请求链接上添加随机参数：

var url1 = "ajaxMessageCounts.action?date=" + new Date().getTime();
var url2 = "ajaxMessageCounts.action?random=" + Math.random();

　　2)在HTTP headers禁止缓存:

<!--HTTP-->
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="Thu, 01 Jan 1970 00:00:01 GMT" />
<meta http-equiv="expires" content="0" />
<!--JSP-->
response.addHeader("Cache-Control", "no-cache");
response.addHeader("Expires", "Thu, 01 Jan 1970 00:00:01 GMT");

　　3)在XMLHttpRequest发送请求之前加上：

XMLHttpRequest.setRequestHeader("If-Modified-Since","0");
XMLHttpRequest.send(null);

7、success

要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。

      function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

8、error

要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

      function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

当然$.ajax()方法参数不止这些，更多参数详情参考http://www.cnblogs.com/tylerdonet/p/3520862.html。

给个异步加载下拉列表的例子：

<script type="text/javascript">
setJsonSelectValue("problemType","ajaxMessageCounts.action","",{"identify":1});
//selectId:select选择框ID   URL：请求Action  value:设置select的selected属性   param:请求参数，这里为json串
function setJsonSelectValue(selectId,url,value,param){
	$.ajax({
		url: url,
		cache:false,
		data:param,
		async:false,
		dataType:"json",
		success: function(data, textStatus, jqXHR){

			var select = $("#" + selectId);
			for(var i=0;i<data.length;i++){
					select.options.add(new Option(data[i].name,data[i].value)); //添加option 后台返回data为List对象数组
			}
		　　　　　//设置selected
			if(value!=""){
				var flag = false;
				$("#"+selectId +" option").each(function() {
					if (value == $(this).val()) {
					   　　flag = true;
					}
				});
				if(flag){
				    select.value=value;
				} else{
					var first = $("#"+selectId+" option[index='0']").val();
					$("#"+selectId).val(first);
				}
			}
		},
		error:function (data, textStatus, jqXHR){
			alert(textStatus);
		}
	});
}
</script>

 二、ajax与Struts的联合使用加载对象

1、给出一个后台封装json字符串的转换框架工具Jackson，Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json、xml转换成Java对象。

2、官网下载Jackson工具包，下载地址；现给出总共的封装Jackson的jar包jackson-all-1.6.4.jar

3、Action代码：

public class IdentityMessage extends ActionSupport {
         private int id;
         private MessageService messagedao;  //数据访问层的组件

         public int getId() {
		    return id;
	        }
	 public void setId(int id) {
		    this.id = id;
	        }

         public MessageService getMessagedao() {
		return messagedao;
	}
	public void setMessagedao(MessageService messagedao) {
		this.messagedao = messagedao;
	}

         public String searchMessage() throws JsonGenerationException, JsonMappingException, IOException{

		Message message = messagedao.searchMessage(id);
　　             //前台主要取title和content属性
		ObjectMapper mapper = new ObjectMapper();
		String jsonstr = mapper.writeValueAsString(message);

		response.setContentType("text/javascript");
		response.setCharacterEncoding("utf-8");

		response.getWriter().print(jsonstr);
		return null;
          }
}

4、struts.xml文件配置：

<action name="searchMessage" class="identifyMessBean" method="searchMessage">
</action>

5、applicationContext-beans.xml文件配置：

    <bean id="MessageDao" class="com.dao.MessageDao">
        <property name="sessionFactory" ref="sessionFactory"/>
     </bean>

     <bean id="MessageService" class="com.service.MessageService">
     	<property name="messagedao" ref="MessageDao"/>
     </bean>

     <bean id="identifyMessBean" class="com.action.IdentityMessage">
  	 <property name="messagedao" ref="MessageService"/>
     </bean>

6、jQuery代码

<script type="text/javascript">
function saveUserMessage(id){
　　$.ajax({
　　     dataType:'json',
        url:'searchMessage.action',
        data: {
            id: id
        },
        type:'POST',
        success:function(data){
        	if(title == ''){
        		$('#userClose'+id).empty().append("<h5>"+ data.title +"</h5>").append("<div id='contents"+id+"'>"+data.content+"</div>");
        	}else{
        		$('#userClose'+id+' h5').text(data.title);
            	        $('#contents'+id).html(data.content);
        	}
        	//设置保存成功提示modal
        	$('#example_modaleditUser').modal('hide');
        	$("#example_modal3").css({position: "absolute", right: "600px", top: "20px",display:"block"}).width(170).height(20).show(3000);
 		$('#example_modal3').delay(1500).hide(0);
        },
        error:function(){
　　　      //设置保存失败提示modal
        	$('#example_modaleditUser').modal('hide');
        	$("#example_modal3").attr("class", "alert alert-error"); //设置新样式
        	$("#example_modal3 img").attr("src", "backstage/assets/img/error.png");
        	$("#message").text('修改失败，请稍候再试！');
        	$("#example_modal3").css({position: "absolute", right: "600px", top: "20px",display:"block"}).width(300).height(20).show(5000);
 		$('#example_modal3').delay(1500).hide(0);
        }
    },500);
}
</script>

7、HTML代码

                <!-- 消息提醒 -->
		<div class="alert alert-success" id="example_modal3" style="display: none ;width:300px;">
			<button class="close" data-dismiss="alert" type="button">×</button>
			<img src="backstage/assets/img/success.png" width="30px;" height="30px;"/> <strong id="message">操作成功！</strong>
		</div>

 三、blockUI配合ajax提高用户体验度

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。我们可以根据需求来设置遮罩样式。更多demo可以参考http://www.malsup.com/jquery/block/  或者 http://www.fengfly.com/plus/view-213992-1.html

先给出一个ajax请求时锁定页面并加载gif动图的例子：

1、页面上导入blockUI插件js文件 当然必不可少的jQuery文件： （下载地址）

<script type="text/javascript" src="js/jquery.validate-1.13.1.js"></script>
<script type="text/javascript" src="backstage/assets/js/jquery.blockUI.js"></script>

2、在需要动图显示的地方添加代码：

<img id= "loading" src="data:images/loader4.gif" style="display:none;width:40px;height:40px;"/>

3、js内容

<script type="text/javascript">
function openAndClos(id){
	  $(document).ajaxStart(function(){
			$.blockUI({
				message: $('#loading'),
				css: {
					top: ($(window).height() - 400) /2 + 'px',
					left:($(window).width() - 200) /2 + 'px',
					width: '400px',
					border: 'none'
				},
				overlayCSS:{backgroundColor: '#fff'}
			});
		}).ajaxStop($.unblockUI);
		var args={"time":new Date()};
		$.getJSON("searchMessage.action",args,function(data){
                        var count=data.counts;
                        //....do something
                });
	}
</script>

 四、ajax在jQuery validate中的运用

jquery.validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。具体使用讲解请参考：http://www.runoob.com/jquery/jquery-plugin-validate.html

同样的，给出一个异步校验用户注册手机号重复的例子：

1）导入jquery.validate插件js文件 （下载地址）

<script type="text/javascript" src="js/jquery.validate-1.13.1.js"></script>

2)HTML代码

<form action = "turnToregisterNext.action" method="post" class="register" id="regForm" autocomplete="off" >
	<label style="float:left;">注册手机号</label>
	<input type="text" class="c_code_msg" style="margin-right: 10px;" name="phone" id="phone"/>
	<input type="submit" id="c_code_button"  class="c_code_button" style="margin-right: 10px;" value="下一步"/>
</form>

3）js代码

 <script type="text/javascript">
 $("#regForm").validate({
    // 添加验证规则
    rules: {
    	phone:{
            required: true,
            digits:true,
            rangelength:[11,11],
            remote: {
            	url: "checkPhone.action",  //后台处理程序
            	type: "post",  //数据发送方式
            	data: {  //要传递的数据
	            	phone: function() {
	            	return $("#phone").val();
            		}
            	}
            }
        }
    },

    //重设提示信息
    messages:{
    	phone: {
            required: "请填写手机号码",
            digits:"请正确填写手机号码",
            rangelength: "手机号码为11位" ,
            remote:"此手机已经注册过"
        }
    }
});
</script>

4）后台处理程序

Struts配置：

<action name="checkPhone" class="UserBean" method="checkPhone"></action>

Action类：

public String checkPhone() throws IOException{
		//0.手机号重复 1.不重复
	　　  int flag = 0;
	　　　flag = ius.phoneHasReg(phone);  //数据库查询返回值
	 　　 HttpServletResponse response = ServletActionContext.getResponse();
	　　　response.setContentType("text/xml");
	     response.setHeader("Cache-Control", "no-cache");
	     PrintWriter out = response.getWriter();
	     if(flag == 0)
	    	 out.print(false);
	     else
	    	 out.print(true);
	return null;
}