Ajax笔记
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var xmlHttpRequest=null;
function ajaxSubmit(){
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest=new XMLHttpRequest();
}
if(null!=xmlHttpRequest){
xmlHttpRequest.open("GET","AjaxServlet",true);
xmlHttpRequest.onreadystatechange=ajaxCallBack;
xmlHttpRequest.send(null);//GET的时候设为空，或者不写
}
function ajaxCallBack(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
var responseText=xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML=responseText;
}
}
}
}
</script>
</head>
<body>
<input type="button" value="get content from server" onclick="ajaxSubmit();"/>
<div id="div1"></div>
</body>
</html>
Ajax：使用jquery
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'json.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
$.ajax({
type:"POST",
url:"MyServlet",
dateType:"html",
success:function(returnedDate){
$("#result").val(returnedDate);
}
})
})
})
</script>
</head>
<body>
<input type="text" id="result" /><input type="button" value="get content from server" id="button1"/>
</body>
</html>
下面那个例子是使用jquery的ajax从服务器端获得信息（xml传输）
xml.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'xml.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
$.ajax({
type:"POST",
url:"XMLServlet",
dateType:"xml",
data:{'name':$("#name").val()},
success:function(retuenedDate){
//解析xml
var id=$(retuenedDate).find("id").text();
var name=$(retuenedDate).find("name").text();
var age=$(retuenedDate).find("age").text();
var address=$(retuenedDate).find("address").text();
var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td><td></table>";
$("#body table:eq(0)").remove();
$("#body").append(html);
}
})
})
})
</script>
</head>
<body id="body">
<select id="name">
<option value="zhangsan">zhangsan</option>
<option value="lisi">lisi</option>
</select>
<input type="button" id="button1" value="get content from server">
</body>
</html>
或者将$.ajax换成更简洁的$.post
$.post("XMLServlet",
{'name':$("#name").val()},
function(retuenedDate){
//解析xml
var id=$(retuenedDate).find("id").text();
var name=$(retuenedDate).find("name").text();
var age=$(retuenedDate).find("age").text();
var address=$(retuenedDate).find("address").text();
var html="<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th></tr><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td><td></table>";
$("#body table:eq(0)").remove();
$("#body").append(html);
}) GET方式也一样
服务器端：XMLServlet：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
Person person=new Person();
if("zhangsan".equals(name)){
person.setId(1);
person.setName("zhangsan");
person.setAddress("shanghai");
person.setAge(30);
}else{
person.setId(2);
person.setName("lisi");
person.setAddress("beijing");
person.setAge(20);
}
Document document=DocumentHelper.createDocument();
Element rootElement=document.addElement("users");
rootElement.addComment("This is a comment!");
Element userElement=rootElement.addElement("user");
Element idElement=userElement.addElement("id");
Element nameElement=userElement.addElement("name");
Element ageElement=userElement.addElement("age");
Element addressElement=userElement.addElement("address");
idElement.setText(person.getId()+"");
nameElement.setText(person.getName());
ageElement.setText(person.getAge()+"");
addressElement.setText(person.getAddress());
response.setContentType("text/xml;charset=utf-8");
OutputFormat format=OutputFormat.createPrettyPrint();
XMLWriter xmlWriter=new XMLWriter(out,format);
xmlWriter.write(document);
out.flush();
}
