J2EE AJAX + JSON 使用语法

缺乏、安全感 2022-12-05 01:39 104阅读 0赞

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

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

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

# AJAX #

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

<table> 
 <thead> 
  <tr> 
   <th>readyState</th> 
   <th>服务器状态</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>请求未初始化</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>服务器连接已建立</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>请求已接收</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>请求处理中</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>请求已完成，且响应已就绪</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th>status</th> 
   <th>网络状态</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>2xx</td> 
   <td>表示成功，200请求成功</td> 
  </tr> 
  <tr> 
   <td>3xx</td> 
   <td>表示重定向</td> 
  </tr> 
  <tr> 
   <td>4xx</td> 
   <td>表示客户端错误，404页面没找到</td> 
  </tr> 
  <tr> 
   <td>5xx</td> 
   <td>表示服务端错误</td> 
  </tr> 
 </tbody> 
</table>

# 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集合全部键值对

[fastjson-1.2.9.jar]: https://www.lanzoux.com/ipKKVghhbja