22、jquery实现异步操作
学习⽬标：
1、了解Jquery对Ajax的封装
2、熟练使⽤JQuery的异步⽅法
3、Jquery对json的解析
学习过程：
⼤家可以看到，在上⼀节中我们实现⼀个ajax⾮常⿇烦，所以现在很多框架都对ajax进⾏了封装，jquery是其中的⼀员，jquery是⼀个⾮常轻量级的框架，实⽤它实现ajax变得⾮常简单。
⼀、AJax⽅法介绍
jquery封装的ajax⽅法⽐较多，底层实现是jQuery.ajax([options])，这个⽅法可以实现ajax⼤部分的底层，这个⽅法涉及了⼤部分的Ajax 的功能，实例代码如下：
$.ajax({
type: "GET",
url: "/api/register",
data: {username:$("#username").val(), password:$("#password").val()},
dataType: "json",
async:true,
beforeSend: function() {
//请求前的处理操作
},
success: function(data){
//请求成功时处理操作
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//请求出错处理操作
alert(XMLHttpRequest.status);
adyState);
alert(textStatus);
},
complete: function(XMLHttpRequest, textStatus) {
this; // 调⽤本次AJAX请求时传递的options参数
}
});
⼆、⽰例
还有两个⽐较简单的的ajax⽅法有(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])两个⽅法，这两个⽅法的参数是⼀样，只不过⼀个是使⽤get⽅法提交，⼀个使⽤post⽅法提交，这⾥我们就以get⽅法介绍，post⽅法使⽤是⼀样的。⽅法参数说明如下：
url String 待载⼊页⾯的URL地址。
data (可选)Map 待发送 Key/value 参数。
callback (可选)Function 载⼊成功时回调函数。
type (可选)String 返回内容格式，xml, html, script, json, text, _default。
下⾯我们使⽤jquery改写上⼀节课的登录⽰例。后台servlet都不需要修改，页⾯实现代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="SimpleDateFormat"%>
<%
String path = ContextPath();
String basePath = Scheme() + "://"
+ ServerName() + ":" + ServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ajax2.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#loginsubmit").click( function () {
var username1=$("#username").val();
var password1=$("#password").val();
$("#loginmessage").html("登陆中....");
//异步登陆
$.post("login", { username: username1, password: password1 },
function(data){
if(data=="1"){
$("#loginmessage").html("登陆成功");
$("#loginform").hide();
}else{
$("#loginmessage").html("登陆失败");
$("#password").val("");
}
});
});
});
</script>
</head>
<body>
<span id="loginmessage"></span>
<form id="loginform">
⽤户名： <input name="username" id="username" /> <br /> 密 ；码：<input
name="password" id="password" type="password" /> <br /> <input
type="button" id="loginsubmit" value="提交">
</form>
</body>
</html>
对⽐上⼀节课，代码简洁了很多。
三、服务器端⽣成json
ajax标准是使⽤xml定义数据格式，作为客户端与服务器端的数据通讯格式，但是我们更常⽤的应该是json，因为json⽐xml更加轻量级，⽽且js解析json也更加简单，上⼀节中我们只是简单的使⽤字符串作为通讯格式，这节我们使⽤json实现更加复杂的通讯。我们主要分为两个步骤。1、服务器端⽣成⽣
成json。2、客户端解析json。
服务器端通常会把对象转换为json格式，这种转换⽐较简单，我们可以通过字符串的拼接来实现，不过我们也可以使⽤第三⽅的技术实现⾃动转换，⽐较常⽤的有json-lib-2.4-jdk15包和gson包两种⽅式，相⽐之下gson更加简单⼀点，在android中我们已经介绍过了，所以这⾥我们讲讲使⽤json-lib的⽅式json-lib的下载地址如下：
把这些包都导⼊项⽬中，我们⾸先把登录模块修改⼀下。登录成功后显⽰登录⽤户的员⼯姓名，所以⽤户登录成功后返回的是Login对象⽣成的json格式，代码修改如下：
public class LoginServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
System.out.println("进⼊了后台服务器");
PrintWriter out = Writer();
//模拟⽹络延迟
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//获得⽤户的信息
String Parameter("username");
String Parameter("password");
LoginBiz loginBiz=new LoginBiz();
Login login=loginBiz.login(username, password);
//把login发给页⾯以json的格式
JSONObject jsonObject=JSONObject.fromObject(login);
if(login==null){
out.String());
}else{
jquery ajax例子/
/保存在session
out.String());
}
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
四、客户端解析json
服务器⽣成之后解析json就⾮常简单了。⽽且这⾥也只有⼀个对象不涉及到循环。修改页⾯端代码如下即可:
$("#loginmessage").html("欢迎"+ployeeName);
五、⽰例，使⽤jquery遍历json
上⾯的页⾯端解析⽐较简单，下⾯我们讲解⼀下使⽤jquery实现对json的遍历。新建⼀个EmployeeServlet类，实现查询全部员⼯的操作，最后⽣成json输出，代码如下：
public class EmployeeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("进⼊");
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = Writer();
EmployeeBiz employeeBiz=new EmployeeBiz();
List<Employee> All();
//JSONObject jObject=JSONObject.fromObject(employees);
JSONArray array=JSONArray.fromObject(employees);
out.String());
System.out.String());
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
你可以直接访问这个servlet查看是否能够正常输出，在浏览器中输⼊访问路径：
，得到⼀下信息。
[{"addr":"北京","birthday":null,"card":"","employeeId":0,"employeeName":"张三","picture":"","salary":0},{"addr":"上海","birthday":null,"card":"","employeeId":0,"emplo
页⾯端解析使⽤jqery的jQuery.each(object, [callback])⽅法，这个⽅法通⽤例遍⽅法，可⽤于例遍对象和数组。回调函数拥有两个参数：
第⼀个为对象的成员或数组的索引，第⼆个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
遍历数组⽰例如下：
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
也可遍历对象，⽰例如下：
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
我们这⾥需要⽤户点击按钮后异步加载员⼯列表信息，html代码如下：
<input value="查询⽤户" type="button" id="employee"/>
<table id="emptable">
<tr><td>⽤户名</td> <td>地址</td></tr>
</table>
js代码如下：
$("#employee").click(function (){
//清空
$("#emptable").html("<tr><td>⽤户名</td> <td>地址</td></tr>");
//异步加载list
$.get("employee", function(data){
$.each( data, function(i, n){
//alert( "Name: " + i + ", Value: " + n.employeeName );
$("#emptable").append("<tr><td>"+n.employeeName+"</td><td>"+n.addr+"</td></tr>"); });
},"json");
});
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论