Ajax接收JSON数据

互联网 20-6-24

1. Ajax接收JSON数据

JSON：JavaScript对象表示法（JavaScript Object Notation）。JSON是一种存储和交换文本信息的语法。因为JSON比XML更轻量，效率更高，更易解析，所以在Ajax中前后台传输数据一般都使用的是JSON格式。

1.1.JSON与XML的对比

JSON 是纯文本

JSON 具有“自我描述性”（人类可读）

JSON 具有层级结构（值中存在值）

JSON 可通过 JavaScript eval()进行解析

JSON 数据可使用 AJAX 进行传输

XML

XML是文档结构，节点复杂

XML可以通过JavaScript解析，需要循环遍历DOM读取节点信息

XML厚重且读取效率低

1.2.JSON语法

JSON语法是JavaScript语法的子集。

JSON语法的规则：

数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON数据的书写格式时：名称/值对，即字段名称（在双引号中），后面一个冒号，对应是值，JSON的值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号中）、对象（在花括号中）、null。

常见的JSON语法书写：

<script type="text/javascript">        var json01 = {}; //json的第一种写法：json对象         var json02 = []; //json的第二种写法：json数组         // json对象一般写法         var json03 = {             name:"张小三",             age:45,             sex:true         };              // json对象标准格式         var json03_1 = {                               "name":"张小三",                               "age":45,                               "sex":true         };              //json数组         var json04 = [{             name:"张小三",             age:45,             sex:true         },{             name:"李华",             age:20,             sex:false         }         ];               var json05 = [{             name:"张小三",             age:45,             sex:true,             department:{                 id:1,                 name:"IT部",                 employees:[                 {name:"xxx", age:23},                 {name:"yyy", age:24}                 ]             }         },{             name:"李华",             age:20,             sex:false         }         ]; </script>

1.3.JSON文件

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

1.4.JSON使用

JSON最常见的用法之一，是从web服务器上读取JSON格式的字符串数据，将JSON数据转化为JavaScript对象，然后在网页上使用该数据。

转化JSON格式字符串为JSON对象的方式有两种：

①使用JavaScript函数eval()

<script type="text/javascript">         //最标准的json格式：key必须要加双引号         var formatJson = {             "name" : "黄小邪",             "age" : 23,             "sex" : true         };         //①jsonStr转json对象方式一：         //eval：计算javascript字符串，并把它作为脚本代码来执行         //前台接收到的是json字符串格式，拿数据需要把字符串转化成json对象         var jsonStr = '{name : "黄小邪", age : 23, "sex" : true}';         //注意：使用eval转换jsonStr，必须前后加括号，这里不区分是否标准格式         var jsonObj = eval("("+ jsonStr +")");         console.debug(jsonObj); </script>

②使用JSON解析器

eval()函数可以编译并执行任何JavaScript代码，使用eval()隐藏了一个潜在的安全问题。

使用JSON解析器将JSON字符串转换为JavaScript对象是更安全的做法。

JSON解析器只能识别JSON字符串文本，不会编译脚本，相对解析速度更快，具有拿来即用的便捷。

使用JSON解析器：

①需要导入JSON转换JSONObj相关jar包；

②转换对象可以是任何JSON字符串格式的文本，但是必须是标准的JSON格式：

//②jsonStr转json对象方式二： var jsonStr2 = '{"name" : "黄小邪", "age" : 23, "sex" : true}'; //注意：使用JSON.parse转换jsonStr必须保证jsonStr是标准格式的字符串 var jsonObj2 = JSON.parse(jsonStr2); console.debug(jsonObj2);

1.5.JSON与Ajax实现二级联动实例

这里使用JSON字符串操作并向前台传输JSON格式的数据来展示JSON与Ajax之间的操作实现。

后台：

虚拟了两个省、市Domain并提供加载获取省、市的方法供Servlet向前台传输数据：

City.java：

/**  * 城市对象  *   */ public class City {     private Long id;     private String name;      public Long getId() {         return id;     }      public void setId(Long id) {         this.id = id;     }      public String getName() {         return name;     }      public void setName(String name) {         this.name = name;     }      public City() {      }      public City(Long id, String name) {         super();         this.id = id;         this.name = name;     }      /**      * 根据省份id查询省份中的城市!      *       * @return      */     public static List<City> getCityByProvinceId(Long id) {                  List<City> citys = new ArrayList<City>();                  if (id == 1) {             citys = Arrays.asList(                     new City(1L,"成都"),                     new City(2L,"南充"),                     new City(3L,"绵阳"),                     new City(4L,"遂林"),                     new City(5L,"达州"),                     new City(6L,"德阳"),                     new City(7L,"乐山")             );         } else if (id == 2) {             citys = Arrays.asList(                     new City(11L,"广州"),                     new City(12L,"佛山"),                     new City(13L,"东莞")             );         } else if (id == 3) {             citys = Arrays.asList(                     new City(21L,"昆明"),                     new City(22L,"玉溪"),                     new City(23L,"丽江")             );         }         return citys;     } }

Province.java：

public class Province {      private Long id;     private String name;      public Province(Long id, String name) {         super();         this.id = id;         this.name = name;     }      public Long getId() {         return id;     }      public void setId(Long id) {         this.id = id;     }      public String getName() {         return name;     }      public void setName(String name) {         this.name = name;     }      public Province() {         super();     }      public static List<Province> getAllProvince() {         List<Province> provinces = new ArrayList<Province>();         provinces.add(new Province(1L, "四川"));         provinces.add(new Province(2L, "广东"));         provinces.add(new Province(3L, "云南"));         return provinces;     } }

提供一个CityProvinceServlet向Ajax提供请求地址：

@WebServlet("/loadData") public class CityProvinceServlet extends HttpServlet {     @Override     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         String cmd = req.getParameter("cmd");         String id = req.getParameter("id");         req.setCharacterEncoding("UTF-8");         resp.setContentType("text/json;charset=UTF-8");          //加载省         if(cmd.equals("province")){             List<Province> provinceList = Province.getAllProvince();             resp.getWriter().print(JSONSerializer.toJSON(provinceList));             System.out.println("加载省！");         }         //加载市         else {             if(id != null && id != ""){                 List<City> cityList = City.getCityByProvinceId(Long.parseLong(id));                 resp.getWriter().print(JSONSerializer.toJSON(cityList));                 System.out.println("加载市！");             }          }     } }

前台对应使用Ajax与JSON来解析传递过来的JSON格式数据：

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>省市二级联动</title>     <script type="text/javascript">         function getAjax(){             var ajax = null;             if(XMLHttpRequest){                 ajax = new XMLHttpRequest();             }else if(ActiveXObject){                 ajax = new ActiveXObject("Microsoft XMLHTTP");             }             return ajax;         }          function loadProvince() {             var xhr = getAjax();             xhr.open("GET", "/loadData?cmd=province");             xhr.onreadystatechange = function () {                 if(xhr.readyState == 4 && xhr.status == 200){                     //provinces：[{"id":1,"name":"四川"},{"id":2,"name":"广东"},{"id":3,"name":"云南"}]                     var provinces = xhr.responseText;                     var jsonObjArr = JSON.parse(provinces);                     //操作DOM往省级option进行填充数据                     //首先先创建每个option元素                     //将jsonObj数据填充进option中                     jsonObjArr.forEach(                         function (obj) {                             var option = document.createElement("option");                             option.setAttribute("value", obj.id);                             option.innerHTML = obj.name;                             document.getElementById("province").appendChild(option);                         }                     );                 }             };             xhr.send();         }         loadProvince();          function loadCity() {             //得到id             var id = document.getElementById("province").value;             //如果是请选择，对应就不加载             if(id == -1){                 document.getElementById("city").innerHTML = "<option>----请选择----</option>";                 return;             }             //每次加载都初始化一次             document.getElementById("city").innerHTML = "";             var xhr = getAjax();             xhr.open("GET", "/loadData?cmd=city&id=" + id);             xhr.onreadystatechange = function () {                 if(xhr.readyState == 4 && xhr.status == 200){                     //[{"id":1,"name":"成都"},{"id":2,"name":"南充"},{"id":3,"name":"绵阳"},{"id":4,"name":"遂林"},{"id":5,"name":"达州"},                     // {"id":6,"name":"德阳"},{"id":7,"name":"乐山"}]                     var cityes = xhr.responseText;                     var jsonObjArr = JSON.parse(cityes);                     jsonObjArr.forEach(                         function (obj) {                             var option = document.createElement("option");                             option.setAttribute("value", obj.id);                             option.innerHTML = obj.name;                             document.getElementById("city").appendChild(option);                         }                     );                     //去除掉----请选择------                     document.getElementById("city").options.remove(0);                 }             };             xhr.send();         }     </script> </head> <body>     省级：<select id="province" onchange="loadCity()">         <option value="-1">----请选择----</option>     </select>     市级：<select id="city">         <option>----请选择----</option>     </select> </body> </html>

实现效果如下：