1.1.json与xml的对比
json
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 文件的文件类型是 .jsonjson 文本的 mime 类型是 application/json1.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>
实现效果如下：
推荐教程：《js教程》
以上就是ajax接收json数据的详细内容。