/**
*包括json基础知识，解析数据、ajax基础、xml解析数据相关原理
*/
json 教程
·json概念
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
json是轻量级的文本数据交换格式
json支持多种语言
json转换为JavaScript对象，由于json文本格式在语法上与创建JavaScript对象的代码相同，无需解析器，
JavaScript程序能够使用內建的eval()函数，用json数据生成原生的JavaScript对象
对比xml：
相同：纯文本，具有层级结构（值中存在值），通过JavaScript解析，使用AJAX进行传输数据
不同：没有结束标签，更短，读写速度快，使用內建的JavaScript eval（）方法 解析，使用数组
不使用保留字
对于AJAX应用 程序来说，json更快更易使用：
使用xml：读取xml文档，使用xml DOM循环遍历文档，读取值并存储在变量中
使用Json：读取json字符串，用eval()处理json字符串
·json的数据类型
原始数据类型：数字（整形、浮点型、定点数），字符和字符串、布尔类型
特殊数据类型：对象、数组、null
复合数据类型对象的数据结构可以被解构为原始数据类型
·json语法
是JavaScript语法的子集
数据在名称/值对中 "name":"cainiao"
数据由逗号分隔
大括号保存对象 { "name":"菜鸟教程" , "url":"www.runoob.com" }
中括号保存数组 {
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"
·json对象
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。
访问对象值
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;
循环对象
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
修改值
myObj.sites.site1 = "www.google.com";
myObj.sites["site1"] = "www.google.com";
删除值
delete myObj.sites.site1;
delete myObj.sites["site1"]；
·json数组
[ "Google", "Runoob", "Taobao" ]
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。
·json对象中的数组
{
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}
访问数组：x = myobj.sites[0];
嵌套json对象中的数组可以包含一个数组或者一个json对象
json通常用于与服务端交换数据json.parse将数据转换为JavaScript对象
JSON.parse(text[, reviver])
参数说明：
text:必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
使用json.parse()解析数据，解析前的字符串要是标准的json格式
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
如下所示：解析并使用json数据
<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
·AJAX详情
使用AJAX从服务器请求json数据，并解析为JavaScript对象
XMLHttpRequest对象可以不在向服务器提交整个页面的情况下，实现局部更新网页
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
//向服务器发送请求
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();
到底是使用GET还是POST：
get更简单也更快
然而有些情况使用POST：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
XMLHttpRequest对象的responseText或responseXML属性是对服务器响应处理的属性
如果服务器响应的并非xml，使用responseText属性
document.getElementById("nyDiv").innerHTML = xmlhttp.responseText;
如果服务器响应的是xml，使用responseXML属性
xmlDoc = xmlhttp.responseXML;
txt ="";
x = xmlDoc.getElementByTagName("Artist");
for(i =0;i<x.length;i++){
txt = txt + x[i].childNodes[0].nodeValue+"<br>"
}
document.getElementById("myDiv").innerHTML = txt;
当发送一个请求后，客户端需要确定什么时候完成这个请求，提供了onreadystatechange事件
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[1];
}
};
Ajax与数据库进行动态通信的原理：这里可以进一步研究
实例：
1.基础的Ajax：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
2.Ajax加载xml：
3.Ajax进行一次HEAD请求：
document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
4.Ajax进行一次指定的HEAD请求：
document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');
5.Ajax从数据库返回数据：
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/statics/demosource/getcustomer.php?q="+str,true);
6.Ajax从xml返回数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('/statics/demosource/cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>
7.用callback检索数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/statics/demosource/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>
</body>
</html>
从服务端接收数组的json数据，json.parse会将其转换为JavaScript数组
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[1];
}
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();
异常：从服务器得到数据
解析数据
JSON 不能存储 Date 对象。
如果你需要存储 Date 对象，需要将其转换为字符串。
之后再将字符串转换为 Date 对象。
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;
介绍一种android app中时间戳的转换方式
GsonBuilder builder = new GsonBuilder();
// Register an adapter to manage the date types as long values
builder.registerTypeAdapter(Timestamp.class, new JsonDeserializer<Timestamp>() {
public Timestamp deserialize(JsonElement json, Type typeOfT, JsonDeserializationContext context) throws JsonParseException {
return new Timestamp(json.getAsJsonPrimitive().getAsLong());
}
});
Gson gson = builder.create();
//循环遍历JsonArray
for(JsonElement info:listJson){
//使用Gson，直接转成Bean对象
ConsumeDetail msgInfo = gson.fromJson(info,ConsumeDetail.class);
list.add(msgInfo);
}
解析函数
JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。
var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");//读取数据
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();
不建议在 JSON 中使用函数。
·JSON.stringify()
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
我们也可以将 JavaScript 数组转换为 JSON 字符串：
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
异常：传递数据给服务器
解析数据
JSON 不能存储 Date 对象。
JSON.stringify() 会将所有日期转换为字符串。
var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
解析函数
JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
XMl教程
·解析xml文档，详见 java学习心得.md第1360行
xml和json优缺点
(1).XML的优缺点
<1>.XML的优点
A.格式统一，符合标准；
B.容易与其他系统进行远程交互，数据共享比较方便。
<2>.XML的缺点
A.XML文件庞大，文件格式复杂，传输占带宽；
B.服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
C.客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
D.服务器端和客户端解析XML花费较多的资源和时间。
(2).JSON的优缺点
<1>.JSON的优点：
A.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
B.易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
C.支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
D.在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
E.因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。
<2>.JSON的缺点
A.没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
B.JSON格式目前在Web Service中推广还属于初级阶段。
二者对比分析：（json会占据未来数据交换格式的地位）
(1).可读性方面。
JSON和XML的数据可读性基本相同，JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，XML可读性较好些。
(2).可扩展性方面。
XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。
(3).编码难度方面。
XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。
(4).解码难度方面。
XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。
(5).流行度方面。
XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。
(6).解析手段方面。
JSON和XML同样拥有丰富的解析手段。
(7).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(8).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(9).数据描述方面。
JSON对数据的描述性比XML较差。
(10).传输速度方面。
JSON的速度要远远快于XML。
XML比较适合于标记文档，而JSON却更适于进行数据交换处理。
jquery通过ajax解析json数据
当然不同的json返回的数据解析方式也不一样：
大概有以下几种：
1.json数据 :{"id":1,"title":"耳温枪","start":"2017-08-05 05:00:00","end":"2017-07-28 17:00:00","allDay":0,"color":"#360","date":"2017:7:27"}
解析方法：
该json本身就是一个json对象，所以可以直接获取：
var Id = json.id;
var title = json.title;
var start = json.start;
var end = json.end;
2.json数据：[{"id":1,"title":"耳温枪","start":"2017-08-05 05:00:00","end":"2017-07-28 17:00:00","allDay":0,"color":"#360","date":"2017:7:27"}]
解析方法：
$.each(json, function(i, item) {
//循环获取数据
var Id = item.id;
var title = item.title;
var start = item.start;
var end = item.end;
});
3. json 数据：
{"first":[{"id":1,"title":"耳温枪","start":"2017-08-05 05:00:00","end":"2017-07-28 17:00:00","allDay":0,"color":"#360","date":"2017:7:27"}]}
解析方法：
$.each(json.first, function(i, item) {
//循环获取数据
var Id = item.id;
var title = item.title;
var start = item.start;
var end = item.end;
});