码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-07-27 23:58:59      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   使用   os   io   2014   

    原生的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>



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

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

标签:style   blog   http   java   使用   os   io   2014   

原文地址:http://blog.csdn.net/ziwen00/article/details/38174779

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!