jQuery_review 之通过.load()方法来实现异步加载HTML文档

来源：互联网发布：yeezy抢鞋软件编辑：程序博客网时间：2024/05/14 09:43

原生的ajax编写起来是相当麻烦的一件事情，我们不仅仅要处理不同浏览器下的XMLHttpRequest对象不同的初始化，还需要识记大量的XMLHttpRequest对象的属性和方法，而且做的很多都是重复性的工作，就如同jdbc的实现方式是一样的，JDBC有很多固定的模式，所以不管是Hibernate还是Ibatis亦或是Spring都使用模板模式来封装了大量相同的调用，让整个方法变得更加容易使用。对于程序员来说，这些都是一些非常好的事情，因为再也不用重复造轮子了，重复造轮子，成本高，性能也未必与成本成正比，所以，作为一个程序员，应当始终明确自制与采购的抉择，如同任老板说的：”我们技术人员不要对技术有宗教般的崇拜，只有卖出去的技技术才有价值“，所以HW提倡的在技术上只领先那么一点点，是非常有道理的，君不见曾经的贝尔实验室，终究还是烟消云灭。

jQuery为我们为ajax做了非常好的封装，比如我们现在有一个需求，需求的内容大概是从服务端获取<div><span>stringValue</span></div>一段Html代码，但是我们只是想要其中的span元素，并且将span元素添加到本地的HTML当中来。这个是用是用load方法就再合适不过了。load()方法，有三个参数可以选择，第一个参数就是url，这个参数用来告诉jquery从什么地方去请求html文档。第二个参数是键值对，一般jQuery的键值对都支持{key:value,key:value}的写法。第三个就是回调函数，不管执行成功不成功，回调函数总是会被执行的。

尤其要注意的是，load方法第一个参数，url后面可以增加一个空格，然后写过滤的内容，例如，上面的我们就可以写成”url span“，就是告诉jQuery，我们得到了返回的html文档之后，仅仅是需要其中的span元素。这个是一个相当实用的方法。对于load的第二个参数，如果为空的话，jQuery会非常智能的将这次ajax采用get方法来进行传送，如果里面是含有参数的，那么就会自动的实用POST进行参数的转发。（TOBO验证，如果url的后面通过？name=value来传递函数，会实用post还是get？）。第三个参数是回调函数，其实回调函数在实际的开发当中是非常有用的，因为我们总不能保证所有的ajax请求都能得到正确的相应，这一点可以看一下jQuery的官方文档，对回调函数默认的三个参数有明确的认识，这个非常重要。

server端的DEMO代码如下：

package com.samsung.servlet;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class TestServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {String name = req.getParameter("name");String address = req.getParameter("address");StringBuffer sb = new StringBuffer();sb.append("<div><span>hi! nice to meet you! ");sb.append(name).append(",(");sb.append(address).append("),");sb.append("how are you getting along?</span></div>");resp.getWriter().print(sb.toString());}}

前端的DEMO代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  <script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript">$(function(){$("#getContentByAjax").click(function(){$("#showText").load("test span",{name:"czz",address:'address'},callBack);});function callBack(){alert('Ajax finish');}});  </script>  </head>  <body>  <div id="showText"></div>  <input type="button" id="getContentByAjax" value="sendAjax">  </body></html>

1 0

jQuery_review 之 通过.load()方法来实现异步加载HTML文档

jQuery_review 之通过.load()方法来实现异步加载HTML文档