ajax
<%@ 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 'index.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">
-->
</head>
<script>
var xmlHttp = null;
var ballSelect = null;
var showDiv = null;
window.onload = function(){
ballSelect = document.getElementById("ballSelect");
showDiv = document.getElementById("showDiv");
}
function createAjax(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function ballChange(){
//得到下拉框的选择项
var info = ballSelect.value;
if(info == '0'){
showDiv.innerHTML = '';
return;
}
//创建AJAX 对象
createAjax();
//设置回调函数
xmlHttp.onreadystatechange = press;
//向服务器发送GET请求
xmlHttp.open("GET","ball?ballType="+info,true);
//设置消息体
xmlHttp.send(null);
}
function press(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var info = "var arr="+xmlHttp.responseText;
//执行字符串，得到数组对象
eval(info);
var str = "";
/*for(var i=0;i<arr.length;i++){
str += "<div>"+arr[i].name+" "+arr[i].place+"</div>";
}*/
for(obj in arr){
str += "<div>"+ arr[obj].name+" "+arr[obj].place+"</div>";
}
showDiv.innerHTML = str;
}
/*
//得到解析XML的对象
var xml = xmlHttp.responseXML;
//得到要标签man中所有对象的集合
var mans = xml.getElementsByTagName("man");
var str="";
for(var i = 0;i<mans.length;i++){
var name = mans[i].getElementsByTagName("name")[0].firstChild.nodeValue;
var place = mans[i].getElementsByTagName("place")[0].firstChild.nodeValue;
str +="<div>"+name+" "+place+"</div>";
}
alert(str);
showDiv.innerHTML = str;
}*/
}
</script>
<body>
<select id="ballSelect" onchange="ballChange();">
<option value="0">请选择</option>
<option value="1">草帽海贼团</option>
<option value="2">白胡子海贼团</option>
</select>
<div id="showDiv"
style="width:200px;height:200px;border:1px solid #000;">
</div>
</body>
</html>
package com.lovo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class BallServlet extends HttpServlet {
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//得到球队的信息
int ballType = Integer.parseInt(request.getParameter("ballType"));
if(ballType==1){//如果为1，表示客户端选择的是湖人队
out.print("[{name:'路飞',place:'船长'},{name:'索隆',place:'刀客'}]");
}else if(ballType==2){//如果为2，表示客户端选凯尔特人队
out.print("[{name:'白胡子',place:'船长'},{name:'艾斯',place:'队长'}]");
}
/*
//如果向客户端发送xml格式数据，那么MIME必须设置为text/xml
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
//得到球队的信息
int ballType = Integer.parseInt(request.getParameter("ballType"));
String info= "<?xml version='1.0' encoding='utf-8'?>";
System.out.println(ballType);
info = "<ball>";
if(ballType==1){
info+="<man>";
info+="<name>蒙奇.D.路飞</name>";
info+="<place>船长</place>";
info+="</man>";
info+="<man>";
info+="<name>洛罗洛洛.索隆</name>";
info+="<place>三刀流刀手</place>";
info+="</man>";
info+="<man>";
info+="<name>娜美</name>";
info+="<place>航海士</place>";
info+="</man>";
info+="<man>";
info+="<name>乌索普</name>";
info+="<place>狙击手</place>";
info+="</man>";
}else if(ballType==2){
info+="<man>";
info+="<name>白胡子</name>";
info+="<place>船长</place>";
info+="</man>";
info+="<man>";
info+="<name>艾斯</name>";
info+="<place>队长</place>";
info+="</man>";
}
info+="</ball>";
out.print(info);*/
}
}
<%
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 'index.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">
-->
</head>
<script>
var xmlHttp = null;
var ballSelect = null;
var showDiv = null;
window.onload = function(){
ballSelect = document.getElementById("ballSelect");
showDiv = document.getElementById("showDiv");
}
function createAjax(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function ballChange(){
//得到下拉框的选择项
var info = ballSelect.value;
if(info == '0'){
showDiv.innerHTML = '';
return;
}
//创建AJAX 对象
createAjax();
//设置回调函数
xmlHttp.onreadystatechange = press;
//向服务器发送GET请求
xmlHttp.open("GET","ball?ballType="+info,true);
//设置消息体
xmlHttp.send(null);
}
function press(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var info = "var arr="+xmlHttp.responseText;
//执行字符串，得到数组对象
eval(info);
var str = "";
/*for(var i=0;i<arr.length;i++){
str += "<div>"+arr[i].name+" "+arr[i].place+"</div>";
}*/
for(obj in arr){
str += "<div>"+ arr[obj].name+" "+arr[obj].place+"</div>";
}
showDiv.innerHTML = str;
}
/*
//得到解析XML的对象
var xml = xmlHttp.responseXML;
//得到要标签man中所有对象的集合
var mans = xml.getElementsByTagName("man");
var str="";
for(var i = 0;i<mans.length;i++){
var name = mans[i].getElementsByTagName("name")[0].firstChild.nodeValue;
var place = mans[i].getElementsByTagName("place")[0].firstChild.nodeValue;
str +="<div>"+name+" "+place+"</div>";
}
alert(str);
showDiv.innerHTML = str;
}*/
}
</script>
<body>
<select id="ballSelect" onchange="ballChange();">
<option value="0">请选择</option>
<option value="1">草帽海贼团</option>
<option value="2">白胡子海贼团</option>
</select>
<div id="showDiv"
style="width:200px;height:200px;border:1px solid #000;">
</div>
</body>
</html>
package com.lovo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class BallServlet extends HttpServlet {
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//得到球队的信息
int ballType = Integer.parseInt(request.getParameter("ballType"));
if(ballType==1){//如果为1，表示客户端选择的是湖人队
out.print("[{name:'路飞',place:'船长'},{name:'索隆',place:'刀客'}]");
}else if(ballType==2){//如果为2，表示客户端选凯尔特人队
out.print("[{name:'白胡子',place:'船长'},{name:'艾斯',place:'队长'}]");
}
/*
//如果向客户端发送xml格式数据，那么MIME必须设置为text/xml
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
//得到球队的信息
int ballType = Integer.parseInt(request.getParameter("ballType"));
String info= "<?xml version='1.0' encoding='utf-8'?>";
System.out.println(ballType);
info = "<ball>";
if(ballType==1){
info+="<man>";
info+="<name>蒙奇.D.路飞</name>";
info+="<place>船长</place>";
info+="</man>";
info+="<man>";
info+="<name>洛罗洛洛.索隆</name>";
info+="<place>三刀流刀手</place>";
info+="</man>";
info+="<man>";
info+="<name>娜美</name>";
info+="<place>航海士</place>";
info+="</man>";
info+="<man>";
info+="<name>乌索普</name>";
info+="<place>狙击手</place>";
info+="</man>";
}else if(ballType==2){
info+="<man>";
info+="<name>白胡子</name>";
info+="<place>船长</place>";
info+="</man>";
info+="<man>";
info+="<name>艾斯</name>";
info+="<place>队长</place>";
info+="</man>";
}
info+="</ball>";
out.print(info);*/
}
}