AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
传递对象时，可以分为传输单个对象或者值，还有传递数组或集合。
首先新建一个数据层：
packagecom.bean;public classDog {privateString name;publicString getName() {returnname;
}public voidsetName(String name) {this.name =name;
}public intgetAge() {returnage;
}public void setAge(intage) {this.age =age;
}publicString getCategory() {returncategory;
}public voidsetCategory(String category) {this.category =category;
}private intage;privateString category;
}
新建一个servlet进行页面功能实现：
packagecom.servlet;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importcom.bean.Dog;/*** Servlet implementation class Testajax1*/@WebServlet("/testajax1")public class Testajax1 extendsHttpServlet {private static final long serialVersionUID = 1L;/***@seeHttpServlet#HttpServlet()*/
publicTestajax1() {super();//TODO Auto-generated constructor stub
}/***@seeHttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {//TODO Auto-generated method stub//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Dog d= newDog();
d.setName("小白");
d.setAge(3);
d.setCategory("土狗");
response.getWriter().append("<?xml version=\'1.0\'?>");
response.getWriter().append("");
response.getWriter().append(""+d.getName()+"");
response.getWriter().append(""+d.getAge()+"");
response.getWriter().append(""+d.getCategory()+"");
response.getWriter().append("");
}/***@seeHttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {//TODO Auto-generated method stub
doGet(request, response);
}
}
新建jsp页面实现ajax：
Insert title here$("#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("
"+n+"
");$("#d2").append("
"+a+"
");$("#d2").append("
"+c+"
");}
});
});
});
效果如下：
取数组或集合时：
packagecom.servlet;importjava.io.IOException;importjava.util.ArrayList;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importcom.bean.Dog;/*** Servlet implementation class Testajax2*/@WebServlet("/testajax2")public class Testajax2 extendsHttpServlet {private static final long serialVersionUID = 1L;/***@seeHttpServlet#HttpServlet()*/
publicTestajax2() {super();//TODO Auto-generated constructor stub
}/***@seeHttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {//TODO Auto-generated method stub//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Dog d1= newDog();
d1.setName("狗1");
d1.setAge(1);
d1.setCategory("品种1");
Dog d2= newDog();
d2.setName("狗2");
d2.setAge(2);
d2.setCategory("品种2");
Dog d3= newDog();
d3.setName("狗3");
d3.setAge(3);
d3.setCategory("品种3");
ArrayList list = new ArrayList();
list.add(d1);
list.add(d2);
list.add(d3);
response.getWriter().append("<?xml version=\'1.0\'?>");
response.getWriter().append("");for(Dog d:list){
response.getWriter().append("");
response.getWriter().append(""+d.getAge()+"");
response.getWriter().append(""+d.getCategory()+"");
response.getWriter().append("");
}
response.getWriter().append("");
}/***@seeHttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {//TODO Auto-generated method stub
doGet(request, response);
}
}
Insert title here$("#d1").click(function(){
$.ajax({
url:"testajax2",
data:{},
type:"POST",
dataType:"XML",
success:function(httpdata){
var dogs= $(httpdata).find("dog");for(var i=0;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+="
"+n+"";tr+="
"+a+"";tr+="
"+c+"";tr+="
";$("#tb").append(tr);
}
}
});
});
});
效果如下：
