jQuery的Deferred对象

现在的位置: 首页 > 综合 > 正文

jQuery的Deferred对象

2013年03月08日 ⁄ 综合 ⁄ 共 2099字 ⁄ 字号小中大 ⁄ 评论关闭

在开发JavaScript时，有时候需要调用的某个函数是很耗时的，这是我们可以采取异步的方法：设定一个回调函数来监听该函数的执行状态，当该耗时函数执行完成后，自动激发事先设定好的回到函数。jQuery提供了Deferred对象来解决该类问题。

$.ajax返回的就是一个Deferred对象，下面是一个例子：

我们在ccc.html页面中显示一个有关书籍的下拉列表（多选），选好之后点击下方的提交按钮。在按钮的click事件中我们使用Deferred对象来等待远端服务器的响应，响应成功则在下方显示远端服务器返回的内容，否则显示失败信息。

ccc.html文件

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery的Deferred对象</title>
  <script type="text/javascript" src ="jquery-1.8.0.js">
  </script>
</head>
<body>
  喜欢的图书：<select multiple="multiple" id="books" name="books">
                <option value="java">JAVA</option>
                <option value="ruby">Ruby</option>
                <option value="python">Python</option>
              </select><br/><br/>
  <input type="button" id="btn" value="单击"/><br/><hr/>
  <div id='d'></div>

  <script type="text/javascript">
    $('#btn').click(function()
    {
      $.ajax({url:"login", 
             data:$('#books').serializeArray()
          }).done(function(data, statusText){
            $('#d').empty();
            $('#d').append('服务器响应状态为: ' + statusText + "<br/>");
            $('#d').append(data);
          })
          .fail(function(){
            alert("服务器响应失败！");
          });
    });
  </script>
</body>
</html>

LoginServlet.java文件

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(name="loginServlet", urlPatterns="/login")
public class LoginServlet extends HttpServlet  {
	@Override
	public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
	{
		response.setContentType("text/html; charset=utf-8");
		String[] books = request.getParameterValues("books");
		PrintWriter writer = response.getWriter();
		
		writer.println("现在时间时：" + new Date(1375066895226L) + "<br/><br/>");
		writer.println("您喜欢的图书是：<br/>");
		writer.println("<ol>");
		
		try {
			Thread.sleep(10*1000);  // 等待十秒钟再响应
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		
		if (null != books) {
			for (String book : books)
				writer.println("<li>" + book + "</li>");
		}
		writer.println("</ol>");		
	}
}

下面看效果。

这是初始的ccc.html页面