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

最新推荐文章于 2023-07-30 20:58:18 发布

陈字文

最新推荐文章于 2023-07-30 20:58:18 发布

阅读量7.7k

点赞数 1

分类专栏： JavaScript相关

本文链接：https://blog.csdn.net/ziwen00/article/details/38174779

版权

JavaScript相关专栏收录该内容

28 篇文章 0 订阅

订阅专栏

原生的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 {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected 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>