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="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;
}
posted on 2015-10-29 14:13 Blueness_girl 阅读(1385) 评论(0) 编辑 收藏 举报
