AJAX即“A
synchronous J
avascript And X
ML”（異步JavaScript和XML），是指一種創建交互式
網頁應用的網頁開發技術。
AJAX 是一種用於創建快速動態網頁的技術。
AJAX 不是新的編程語言，而是一種使用現有標准的新方法。
通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。
使用ajax實現傳輸對象、集合、數組等（xml）
Jquery包中封裝了ajax相關的
package com.maya.ajax; 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.maya.user.Users; /** * 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 { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); Users user=new Users(); user.setName("張三"); user.setSex("男"); user.setAge(23); Users user1=new Users(); user1.setName("李四"); user1.setSex("女"); user1.setAge(24); Users user2=new Users(); user2.setName("王五"); user2.setSex("男"); user2.setAge(25); ArrayList<Users> list=new ArrayList<Users>(); list.add(user); list.add(user1); list.add(user2); response.getWriter().append("<?xml version='1.0' ?>"); response.getWriter().append("<users>"); for(Users u:list){ response.getWriter().append("<user>"); response.getWriter().append("<name>"+u.getName()+"</name>"); response.getWriter().append("<sex>"+u.getSex()+"</sex>"); response.getWriter().append("<age>"+u.getAge()+"</age>"); response.getWriter().append("</user>"); } response.getWriter().append("</users>"); } /** * @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); } }
HTML頁面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#ss").click(function(){ $.ajax({ url:"testajax2", data:{}, type:"POST", dataType:"XML", success:function(httpdata){ var s=$(httpdata).find("user"); for(var i=0;i<s.length;i++){ $("#shuchu").append(s.eq(i).find("name").text()); $("#shuchu").append(" "); $("#shuchu").append(s.eq(i).find("sex").text()); $("#shuchu").append(" "); $("#shuchu").append(s.eq(i).find("age").text()); $("#shuchu").append("<br>"); } } }); }); }); </script> </head> <body> <span id="ss">點擊獲取數據</span> <div id="shuchu"></div> </body> </html>