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值

异步例子如：从用户体验度来思考，加载数据时候提示“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禁止缓存:

<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" />

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。

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

二、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文件配置：

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

6、jQuery代码

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文件：（下载地址）

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

3、js内容

四、ajax在jQuery validate中的运用

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

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

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

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代码

4）后台处理程序

Struts配置：

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;
}