<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
<%
/*
本题的思想：首先创建一个Ajax,同时创建一个文本框，当鼠标失去文本框的焦点，调用发送请求函数，然后转到servlet中，
在servlet中定义了Json的存储数据的方式，由servlet中输出流对象输出，回到jsp页面的发送函数，在其
中调用回调函数处理数据把内容加载到下拉列表中去显示出来，
*/
%>
<script>
//定义一个全局变量
var xmlHttpRequest;
/*
创建异步核心请求对象
*/
var createRequest = function(){
//判断是否是IE浏览器
if(window.XMLHttpRequest){
//非Ie浏览器
xmlHttpRequest = new XMLHttpRequest();
}else{
//ie浏览器
try {
//高版本Ie 4.0以上
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//低版本
xmlHttpRequest = new ActionXObject("Microsoft.XMLHTTP");
}
}
};
/*
定义发送请求的函数
*/
var sendRequest = function(){
//判断核心请求对象是否已经存在
if(xmlHttpRequest==null){
createRequest();//不存在创建
}
//打开请求对象
xmlHttpRequest.open("post","jsonServlet",true);
//处理请求数据
xmlHttpRequest.onreadystatechange = callBack;
//发送请求对象
xmlHttpRequest.send();
};
//创建处理请求数据的函数
var callBack = function(){
if(xmlHttpRequest.status==200 && xmlHttpRequest.readyState==4){
var jsonString = xmlHttpRequest.responseText;
//alert(jsonString.student);//不能够取得到值，错误,应该先把字符串转换为json对象
//把后台接受到字符串转为js的json对象
var json = eval("("+jsonString+")");
//alert(json.student);正确
//获取 填充获取下拉列表对象
var select = document.getElementById("msg");
//清除下拉列表的数据
select.options.length = 0;
select.options.add(new Option("==学生信息如下==","-1",""));
var arr = json.student;
for(var i =0;i<arr.length;i++){
var option = new Option(arr[i].name+"--"+arr[i].age+"--"+arr[i].sex);
// 把构建的option对象添加到列表框中
select.options.add(option);
}
}
};
</script>
</head>
<body>
<!-- 当在文本框中鼠标失去焦点，下面的选择框中的值自动加载出来 -->
编号:<input type="text" id="requ" onblur="sendRequest();"><br/>
学生信息:<select id="msg" style="200px;" ></select>
</body>
</html>
//////////////////////////////以上是Jsp页面//////////////////////////////////////////////////////
///////////////////////////////以下是servlet页面//////////////////////////////////////////////////////////////
package com.test.json;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class JsonServlet
*/
@WebServlet("/jsonServlet")
public class JsonServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public JsonServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//存入Json数据
out.print("{'student':[");
out.print("{'name':'小明','age':'20','sex':'男'},");
out.print("{'name':'张三','age':'30','sex':'男'},");
out.print("{'name':'丽丽','age':'24','sex':'女'}");
out.print("]}");
out.flush();
out.close();
}
}