J2EE AJAX + JSON 使用语法

AJAX：Asynchronus Javascript And Xml，异步 JavaScript 和 XML 技术

AJAX 技术的使用，可以替代 JSP 并且效率高很多；使用 AJAX 与服务器异步传输信息，浏览器页面不刷新的情况下，JavaScript 接收服务器传回的信息并输出到页面上。

XML 本扮演着数据的存储和传输的功能，但是由于 XML 文件较为耗费资源，如今多使用 JSON（JavaScript Object Notation）替代 XML 的功能。

AJAX

<script type="text/javascript">

//HTML加载完成时，执行该函数
window.onload = function () {
	//1.创建一个AJAX对象
    var xmlHttp = new XMLHttpRequest();
    
    //2.打开与服务器通信的管道
    //	参数：
    //	1.String类型参数  请求的方式 get/post
    //	2.String类型参数  请求的名字 可以拼接?作为参数
    //	3.boolean类型参数 是否为异步请求 默认true	
    xmlHttp.open("", "", true);

	//3.等待服务器传回来的响应信息
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            //接收服务器传回来的响应信息
            var result = xmlHttp.responseText;
            //运用 JavaScript 操作 DOM，将该信息展示在页面中
            ...
        }
    }
    //4.发送请求
    xmlHttp.send();
}

</script>

xmlHttp 对象有一个属性 readyState 是一个 int 类型的数字，监测服务器的处理状态

xmlHttp 对象还有一个属性 status，表示网络请求的结果

JSON

• fastjson-1.2.9.jar

服务器端，controller 类：

JSONObject jsonObject = new JSONObject();

jsonObject.put("键", 值);

response.setCharacterEncoding("UTF-8");

response.getWriter().write(jsonObject.toJSONString());

put 进入 jsonObject 的数据类型：

• 很少见：String、int、Integer
• 常见：数组 [ ]、集合 List Set Map、对象

浏览器端：

//JSON格式的String
var responseText = xmlhttp.responseText;

//JS对象
var jsonObject = JSON.parse(responseText);

//JS对象 > 与Java传过来的数据类型对应
var xxx = jsonObject.键;

//xxx一般是数组、集合或者对象，然后根据需求遍历
...

JSON.parse() 方法可以解析：数组、List、Set、对象、Map

但是 Map 是非常特殊的，因为每个元素的键值对都不相同，如此解析：

var map = JSON.parse(responseText).键;

//keys、values 下标是一一对应的
Object.keys(map);//获取map集合全部key
Object.values(map);//获取map集合全部value
Object.entries(map);//获取map集合全部键值对