Ajax返回JSON数据

* JSON数据格式：
            * 定义：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
            * 特点：
                * 易于程序员阅读
                * 易于计算机解析
                * 浏览器原生就支持JSON数据格式
                * 结构相对来讲，比较灵活
                * 元素值可具有的类型：string, number, object, array, true, false, null
            * JSON结构：
                * key/value格式：类似于Map集合
                * 数组
        * JSON数据格式在Ajax异步交互中的应用：
            * 服务器端：构建一个String类型JSON数据格式内容
            * 客户端：
                * XMLHttpRequest对象的responseText属性来接收
                * 利用eval()函数，进行类型转换
            * 如何将javabean、List、Array和Map集合转换成JSON数据格式？
                * 第三方工具：json-lib

 <script language="JavaScript">
  				/*
  				 * 定义一个javabean
  				 * Class Province{属性}
  				 * province.name
  				 * 
  				 * JSON数据格式：类似于Map集合，其实就是javascript对象
  				 * 	* 是以"{}"开始和结束的
  				 * 	* 数据存储是以"key/value"
  				 * 	* 多个数据之间，用","隔开
  				 */
				var person = {
					name : "zs",
					age : 18,
					sex : "男"
				}
				
				alert(person.name);
				
				
  </script>

 <script language="JavaScript">
  				/*
  				 * 定义一个javabean
  				 * Class Province{属性}
  				 * province.name
  				 * 
  				 * JSON数据格式：类似于Map集合，其实就是javascript对象
  				 * 	* 是以"{}"开始和结束的
  				 * 	* 数据存储是以"key/value"
  				 * 	* 多个数据之间，用","隔开
  				 */
				var person = [
					{
						name : "zhangwuji",
						age : 18,
						sex : "男"
					},
					{
						name : "zhouzhiruo",
						age : 18,
						sex : "女"
					}
				]
				
				alert(person[1].name);
				
				
  </script>

<script language="JavaScript">
  				/*
  				 * 定义一个javabean
  				 * Class Province{属性}
  				 * province.name
  				 * 
  				 * JSON数据格式：类似于Map集合，其实就是javascript对象
  				 * 	* 是以"{}"开始和结束的
  				 * 	* 数据存储是以"key/value"
  				 * 	* 多个数据之间，用","隔开
  				 */
				var person = {
					"yttlj":
					[
						{
							name : "zhangwuji",
							age : 18,
							sex : "男"
						},
						{
							name : "zhouzhiruo",
							age : 18,
							sex : "女"
						}
					]
				}
				
				alert(person.yttlj[1].name);
				
				
  </script>

  <script language="JavaScript">
  				/*
  				 * 定义一个javabean
  				 * Class Province{属性}
  				 * province.name
  				 * 
  				 * JSON数据格式：类似于Map集合，其实就是javascript对象
  				 * 	* 是以"{}"开始和结束的
  				 * 	* 数据存储是以"key/value"
  				 * 	* 多个数据之间，用","隔开
  				 */
				var person = [
					{
						"yttlj":
						[
							{
								name : "zhangwuji",
								age : 18,
								sex : "男"
							},
							{
								name : "zhouzhiruo",
								age : 18,
								sex : "女"
							}
						]
					},
					{
						"xajh":
						[
							{
								name : "linghuchong",
								age : 18,
								sex : "男"
							},
							{
								name : "dongfangbubai",
								age : 18,
								sex : "女"
							}
						]
					}
				]
				
				alert(person[1].xajh[1].name);
				
				
  </script>

    <script language="JavaScript">
        /*
         * 定义一个javabean
         * Class Province{属性}
         * province.name
         *
         * JSON数据格式：类似于Map集合，其实就是javascript对象
         * 	* 是以"{}"开始和结束的
         * 	* 数据存储是以"key/value"
         * 	* 多个数据之间，用","隔开
         */
        var person1 = {
            "wuxia": [{
                "yttlj": [{
                    name: "zhangwuji",
                    age: 18,
                    sex: "男"
                }, {
                    name: "zhouzhiruo",
                    age: 18,
                    sex: "女"
                }]
            }, {
                "xajh": [{
                    name: "linghuchong",
                    age: 18,
                    sex: "男"
                }, {
                    name: "dongfangbubai",
                    age: 18,
                    sex: "女"
                }]
            }],
            "yanqing": [{
                "hzgg": [{
                    name: "wuage",
                    age: 18,
                    sex: "男"
                }, {
                    name: "xiaoyanzi",
                    age: 18,
                    sex: "女"
                }]
            }, {
                "qssymm": [{
                    name: "heshuhuan",
                    age: 18,
                    sex: "男"
                }, {
                    name: "luyiping",
                    age: 18,
                    sex: "女"
                }]
            }]
        }
        
        var person2 = {
            name: "xxx",
            age: 18,
            addrress: {
                "home": "xxshixxqu",
                "family": "yyshiyyqu"
            }
        }
        
        var method = {
            add: function(a, b){
                return a + b;
            }
        }
        
        alert(method.add(1, 2));
        
        //				alert(person1.yanqing[0].hzgg[1].name);
    </script>

案例

public class JsonServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		//手工构建一个String类型的json数据格式
		String json = "[{'province':'吉林省'},{'province':'辽宁省'},{'province':'山东省'}]";
		
		out.println(json);
		
	}

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.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">
  </head>
  <body>
  	  <select id="province" name="province">
       <option value="">请选择....</option>
     </select>
	 <select id="city" name="city">
	 	<option value="">请选择.....</option>
	 </select>
  </body>
  <script language="JavaScript">
  			window.onload = function(){
				var xhr = ajaxFunction();
				
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4){
						if(xhr.status==200){
							var data = xhr.responseText;
							
							/*
							 * eval()函数：将接收响应的数据格式，转换成json数据格式
							 * 
							 * 向eval()函数，传递一对空的"{}"(空的json格式)
							 * 	* 利用"()"将其包装，eval()函数会强行将其转换成json数据格式
							 * 	* 不用"()"将其包装，eval()函数会将其解释为一个空的语句块
							 */
							var json = eval("("+data+")");
							
							alert(json);
						}
					}
				}
				
				xhr.open("get","../jsonServlet?timeStamp="+new Date().getTime(),true);
				
				xhr.send(null);
				
				function ajaxFunction(){
				   var xmlHttp;
				   try{ // Firefox, Opera 8.0+, Safari
				        xmlHttp=new XMLHttpRequest();
				    }
				    catch (e){
					   try{// Internet Explorer
					         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
					      }
					    catch (e){
					      try{
					         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					      }
					      catch (e){}
					      }
				    }
				
					return xmlHttp;
				 }
			}
  </script>
</html>

总结 注意 eval()函数的用法