通过load,可以实现动态加载功能。下面这个例子实现的是加载页面的时候通过ajax请求servlet,然后servlet生成一个html的sub内容,在动态加载。类似很多portal上的part loading的功能
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src='../jquery.js'></script>
<script>
$(document).ready(function(){
$('#context').append('<h3 id="loading">loading.......</h3>');
var myname = $('#name').val();
var mycity = $('#city').val();
//这个例子里面实际上不需要带参数,这里只是为了说明如何带参数查询,注意如果带参数,那么是post请求,否则get请求
$('#context').load('../LoadServlet',{"name":myname,"city":mycity},function(){
//alert("加载完毕");
$('#loading').remove();
});
/* $('#btnLoad').click(function(){
$('#context').append('<h3 id="loading">loading.......</h3>');
var myname = $('#name').val();
var mycity = $('#city').val();
$('#context').load('../LoadServlet',{"name":myname,"city":mycity},function(){
//alert("加载完毕");
$('#loading').remove();
});
});*/
});
</script>
</head>
<body>
<h1>AJAX的load测试</h1>
Name:<input name="name" id="name">
City:<input name="city" id="city">
</p>
<button id="btnLoad">加载</button>
<div id="context">
加载的html
</div>
</body>
</html>
java
package ajaxServlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class LoadServlet
*/
public class LoadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* Default constructor.
*/
public LoadServlet() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String city = request.getParameter("city");
//模拟延时
try
{
Thread.sleep(3000);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter writer = response.getWriter();
writer.write("<h1>servlet给的一个回应html,您刚才输入的是"+name+" "+city+"</h1>");
writer.flush();
writer.close();
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src='../jquery.js'></script>
<script>
$(document).ready(function(){
$('#context').append('<h3 id="loading">loading.......</h3>');
var myname = $('#name').val();
var mycity = $('#city').val();
//这个例子里面实际上不需要带参数,这里只是为了说明如何带参数查询,注意如果带参数,那么是post请求,否则get请求
$('#context').load('../LoadServlet',{"name":myname,"city":mycity},function(){
//alert("加载完毕");
$('#loading').remove();
});
/* $('#btnLoad').click(function(){
$('#context').append('<h3 id="loading">loading.......</h3>');
var myname = $('#name').val();
var mycity = $('#city').val();
$('#context').load('../LoadServlet',{"name":myname,"city":mycity},function(){
//alert("加载完毕");
$('#loading').remove();
});
});*/
});
</script>
</head>
<body>
<h1>AJAX的load测试</h1>
Name:<input name="name" id="name">
City:<input name="city" id="city">
</p>
<button id="btnLoad">加载</button>
<div id="context">
加载的html
</div>
</body>
</html>
java
package ajaxServlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class LoadServlet
*/
public class LoadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* Default constructor.
*/
public LoadServlet() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String city = request.getParameter("city");
//模拟延时
try
{
Thread.sleep(3000);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter writer = response.getWriter();
writer.write("<h1>servlet给的一个回应html,您刚才输入的是"+name+" "+city+"</h1>");
writer.flush();
writer.close();
}
}