日月第一击
这是我前端生涯第一次和后台对接，其经历真是苦不堪言，多次绝处逢生，柳暗花明，可就是迟迟见不到那条村子。当然，最后我还是完成了这次对接。下面来聊一聊我这白痴一般的经历。
序章
话说天下大势，分久必合，合久必分。2016年，程序员的角色已经有了很大的分化，后端、前端、移动端、算法各领域名家辈出，他们都是各自领域的专家，然而要完成统一天下的大业，非一己之力所能及，需要集各家之所长，方能六国灭秦。
于是，我们就这么组成了规划狮项目组。
那是一个寒冷的夜晚，小女孩在外面卖火柴，后来冻死了（画风不太对-_-#。。）
那天晚上，我对后台樟哥说：“我这边估计差不多了，到时候你怎么把数据传给我去显示啊？”
樟哥语重心长地说：“小伙，我传你一本惊世秘籍——
AJ心经，练完以后，方能完成数据对接。”
听到AJ心经一词，我内心澎湃，心想：卧槽！这什么玩意儿！？
我虚心问道：“敢问樟哥，何为AJ心经？”
樟哥抿嘴一笑，说道：“就是
ajax+json嘛～～”
我们前后端对接的故事就这么发生了：
第一次对接
我先是在
w3school里花15分钟把json看完了。然后再花20分钟把ajax也看完了。
我找樟哥说：“ok了，来吧。”然后他给了我一个地址，这个神奇的地址我当然是忘了，反正显示的内容就是json格式。然后，我尴尬的发现我连获取数据都还没做到。。（我想当然的把下面一条判断语句去掉了）
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)所以，这天晚上，不熟悉json的我最后没能完成第一次对接。回去得先把json的例子操作一遍。
第二次对接
第二天早上，我们进行了再一次对接，这次对接简直是神一般的对接，不知道为什么这次能获取他发给我的json数据了！（不用问肯定是昨晚自己写错了哪个单词-_-#）
然而，幸福并没有降临在我身上。我仅仅是能获取json的文本数据，并没有解析出来（当然，解析其实也很简单，加个解析函数JSON.parse()就行，然而我当时还在折腾eval()。。不知道为啥行不通。。|~|）
最后，我当然还是把自己折腾到成功了。来放代码展示：
↓这是要操作的json数据
{
"sites": [
{ "name":"dkplus" , "content":"有人要约球吗？下午系办篮球场，不见不散！" },
{ "name":"詹姆斯" , "content":"我想打篮球" },
{ "name":"梅西" , "content":"我想踢球" }
]
}↓这是js解析json代码
function loadXMLDoc(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// document.getElementById("text").innerHTML = xmlhttp.responseText;//测试能否获取数据
var data = xmlhttp.responseText;
// alert(data);//测试能否获取数据到对象
var obj = JSON.parse(data);//解析json数据
// alert(obj.sites[0].name);//测试解析是否成功
document.getElementById("h2").innerHTML = obj.sites[0].name;
document.getElementById("content").innerHTML = obj.sites[0].content;
}
}
xmlhttp.open("get","test.json",true);
xmlhttp.send();
}上面有注释的地方都是我所踩过的坑，测试json的数据传输真的要一步一步来。
先判断是否接收了所有的数据,并输出到一个标签查看这些数据
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("text").innerHTML = xmlhttp.responseText;然后把数据储存到一个对象，看有没有成功
var data = xmlhttp.responseText;
alert(data);再用JSON.parse()函数解析数据，输出看是否成功
var obj = JSON.parse(data);
alert(obj.sites[0].name);最后就是动真格的了，把解析的数据填进标签里
document.getElementById("h2").innerHTML = obj.sites[0].name;
document.getElementById("content").innerHTML = obj.sites[0].content;已经做到这里了，樟哥再一次语重心长对我说了一句话：“……”
卧槽，ng的json解析这么流弊？！
然后我就去搞ng的$http服务那块了。
微信公众号dkplus，由前端少侠dk搭建的分享平台，主攻web前端，但也游离于设计，乐于分享他的代码故事、ps技巧和ppt技巧。码在江湖，身不由己，珍爱生命，简约设计，我是前端，也是设计。博客园：http://www.cnblogs.com/dkplus/