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>
效果如下：
