AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
传递对象时，可以分为传输单个对象或者值，还有传递数组或集合。
首先新建一个数据层：
package com.bean;
public class Dog {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
private int age;
private String category;
}
新建一个servlet进行页面功能实现：
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.bean.Dog;
/**
* Servlet implementation class Testajax1
*/
@WebServlet("/testajax1")
public class Testajax1 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Testajax1() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Dog d = new Dog();
d.setName("小白");
d.setAge(3);
d.setCategory("土狗");
response.getWriter().append("<?xml version=‘1.0‘?>");
response.getWriter().append("<pet>");
response.getWriter().append("<name>"+d.getName()+"</name>");
response.getWriter().append("<name>"+d.getAge()+"</name>");
response.getWriter().append("<name>"+d.getCategory()+"</name>");
response.getWriter().append("</pet>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
新建jsp页面实现ajax：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#d1").click(function(){
$.ajax({
url:"testajax1",
data:{},
type:"POST",
dataType:"XML",
success:function(httpdata){
var n = $(httpdata).find("name").text();
var a = $(httpdata).find("age").text();
var c = $(httpdata).find("category").text();
$("#d2").append("<p>"+n+"</p>");
$("#d2").append("<p>"+a+"</p>");
$("#d2").append("<p>"+c+"</p>");
}
});
});
});
</script>
</head>
<body>
<div id="d1">aaaa</div>
<div id="d2"></div>
</body>
</html>
效果如下：
取数组或集合时：
package com.servlet;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.bean.Dog;
/**
* Servlet implementation class Testajax2
*/
@WebServlet("/testajax2")
public class Testajax2 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Testajax2() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Dog d1 = new Dog();
d1.setName("狗1");
d1.setAge(1);
d1.setCategory("品种1");
Dog d2 = new Dog();
d2.setName("狗2");
d2.setAge(2);
d2.setCategory("品种2");
Dog d3 = new Dog();
d3.setName("狗3");
d3.setAge(3);
d3.setCategory("品种3");
ArrayList<Dog> list = new ArrayList<Dog>();
list.add(d1);
list.add(d2);
list.add(d3);
response.getWriter().append("<?xml version=‘1.0‘?>");
response.getWriter().append("<pet>");
for(Dog d:list){
response.getWriter().append("<dog name=‘"+d.getName()+"‘>");
response.getWriter().append("<age>"+d.getAge()+"</age>");
response.getWriter().append("<category>"+d.getCategory()+"</category>");
response.getWriter().append("</dog>");
}
response.getWriter().append("</pet>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#d1").click(function(){
$.ajax({
url:"testajax2",
data:{},
type:"POST",
dataType:"XML",
success:function(httpdata){
var dogs = $(httpdata).find("dog");
for(var i=0;i<dogs.length;i++){
var n =$(dogs).eq(i).attr("name");
var a =$(dogs).eq(i).find("age").text();
var c =$(dogs).eq(i).find("category").text();
var tr ="<tr>";
tr+="<td>"+n+"</td>";
tr+="<td>"+a+"</td>";
tr+="<td>"+c+"</td>";
tr+="</tr>";
$("#tb").append(tr);
}
}
});
});
});
</script>
</head>
<body>
<div id="d1">11111</div>
<table id="tb" width="100%" cellpadding="5" cellspacing=‘1‘ border="0">
</table>
</body>
</html>
效果如下：
时间： 2024-07-30 20:05:49