AJAx应用json与后台交互数据之-JSONArray _JavaScript

AJAx使用json与后台交互数据之---JSONArray

<%@ 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">
	-->
		<script type="text/javascript">
		
		
		var xmlHttpReq;
		//创建一个XmlHttpRequest对象
		function createXmlHttpRequest() {
			if (window.XMLHttpRequest) {
				xmlHttpReq = new XMLHttpRequest();//非IE浏览器
			} else if (window.ActiveXObject) {
				xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
			}
		}
		function check(name){
			if(name!=""){
				alert(name);
		//1.创建一个XmlHttpRequest对象
				createXmlHttpRequest();
				
		//2.调用XMLHTTPRequest对象的 open方法()，
				
				//初始化XMLHttpRequest组件
				//处理缓存问题 url后面再加个时间参数，保证每次请求的url都不同
				var url = "json";
				var query = "name="+name;
				xmlHttpReq.open("POST",url,true);
				// "Get"是请求方式，
				//url向后台服务器发送请求的url
				//true 代表使用异步请求， 可选参数，默认为true 
				
		//3.注册回调函数
				xmlHttpReq.onreadystatechange=callBack;
				//callBack 为自定义的回调函数的名字 注意：后面没有括号
				//当xmlHttpReq对象的readystate状态改变时自动触发 回调函数callBack
		//4.把请求发送到服务器	
			    xmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
				xmlHttpReq.send(query); //post请求
				
			}else{
				alert("请输入数据");
			}
			
		}
		
		function callBack(){
			//alert("readyState:"+xmlHttpReq.readyState);
			if(xmlHttpReq.readyState==4){//ajax引擎初始化成功
				if(xmlHttpReq.status==200){//与tomcat（服务器）交互成功,http协议成功
					alert("xmlHttpReq.status:"+xmlHttpReq.status);
					
					var json = xmlHttpReq.responseText;
					//通过responseText 属性，取出服务器端返回的数据
					var citys = eval(json);//通过eval函数把jsonArray对象转换为数值
					alert("citys"+citys);
					for(var i=0; i<citys.length; i++){
						alert(citys[i]);
					}
					
				}
			}
		}
	</script>

	</head>

	<body>
		<p align="center">
			省市二级联动
		</p>
		<table align="center">
			<tr>
				<td>
					省份
				</td>
				<td>
					<input type="text" onblur="check(this.value)">
				</td>
				<td>
					<span id="sp1"></span>
				</td>
			</tr>

		</table>


	</body>
</html>

?后台代码:

package com.wepull.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class JsonServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		String name = request.getParameter("name");
		System.out.println("ajax传来的name："+name);
	    

		PrintWriter  pw = response.getWriter();
		
		JSONArray array = new JSONArray();
		if("湖北".equals(name)){
			
			array.add("武汉");
			array.add("宜昌");
			array.add("黄石");
		}else if("浙江".equals(name)){
			array.add("杭州");
			array.add("温州");
			array.add("台州");
		}else if("广东".equals(name)){
			array.add("广州");
			array.add("深圳");
			array.add("东莞");
		}
		System.out.println(array);
		System.out.println("array.toString()"+array.toString());
		pw.println(array);
	}
	
}