Ajax_数据格式_JSON（03）

最新推荐文章于 2022-10-15 15:27:43 发布

慢慢成长的我

最新推荐文章于 2022-10-15 15:27:43 发布

阅读量364

点赞数

分类专栏： ajax学习

本文链接：https://blog.csdn.net/u012027337/article/details/51984052

版权

ajax学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、JSON

1、json 是一种简单的数据格式，比xml更加轻巧。JSON 是javascript原生格式，这意味这在javascript中处理JSON数据不需要任何特殊的API或者工具包

2、JSON的规则很简单，对象是一个无序的 “名称/值” 对集合，一个对象以 ‘{’ （左括弧）开始，以 ‘}’（右括弧）结束

每一个名称后面跟一个“：”（冒号），名称/值之间用逗号分隔开。

3、JSON示例代码如此啊：

 var jsonObject = {
              "name": "guishanggu",
              "age" : 12,
              "adderss" :{"city" :"beijing", "school" :"西交大"},
              "teaching" : function(){alert("JAVAEE,JSP....")}
              }
              
              alert(jsonObject.name);
              alert(jsonObject.adderss.city);
              jsonObject.teaching();

JSON对象本身的属性的值还可以是一个JSON对象，就像示例代码中的属性address它既是jsonObject对象的属性，同时他自己本身也是一个JSON对象，

而且属性还可以是一个方法，将比如示例代码中的teaching函数。

二、解析JSON

1、json 只是一种文本字符串，它被存储在responseText属性中

2、为了读取存储在responseText属性中的JSON数据，需要用到javascript的 eval() 函数

eval函数会把一个字符串当做它的一个参数，然后这个字符串会被当做javascript代码来执行，因为JSON的字符串就是javascript代码构成的

所以它本身是可以执行的。

示例代码：

 //1、将JSON字符串转化为JSON 对象
 var jsonstr = "{'name': 'guigu'}";
 var strJson = eval( "(" + jsonstr + ")");
 alert(strJson.name);
 
 //2、将字符串转化成json 对象，使用eval方法
  var str = "alert('hello eval')"
 //eval可以将一个字符创转化为js代码来执行 
  eval(str);

3、JSON提供了json.js包后，使用parseJSON()方法可以将JSON 对象解析为 JS 对象

三、

1、项目目录结构：

2、涉及相关文件的代码：

2.1、andy.js文件代码如下：

{"person": {
	   "name":"Andy Budd",
	   "website": "http://andybudd.com/",
	   "email": "andy@clearleft.com"
	}
}

2.2、index.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
window.οnlοad=function(){
   
  var  nodes = document.getElementsByTagName('a');
  for(var i = 0; i<nodes.length;i++){
  //1、获取a节点，并为其添加onclick函数响应
  nodes[i].οnclick=function(){
  //3、创建XMLHttpRequest对象
   var request = new XMLHttpRequest();
  //4、准备发送请求的数据：url 
   var url = this.href;
   var method = "GET";
   //5、调用XMLHttpRequest对象的open方法
   request.open(method, url);
   //6、调用XMLHttpRequest对象的send方法
   request.send(null);
   //7、为XMLHttpRequest对象 添加onreadystatechange函数响应
   request.onreadystatechange = function(){
   //8、判断响应是否完成：XMLHttpRequest对象的 readystate 属性值为4的时候
     if(request.readyState == 4){
     //9、在判断响应是否可用：XMLHttpRequest对象的 Status 的值为200
       if(request.status == 200 || request.status == 304){
           //10-1 结果为xml格式，所以需要responseText 来获取
            var result = request.responseText;
          //10-2 结果不能直接使用，必须先创建对应的节点，在把节点加入到 #details 中
              //使用eval将result字符串转化为JSON 对象
           var jsonObject = eval("(" + result + ")")
              
           var name = jsonObject.person.name;
           var website = jsonObject.person.website;
           var email = jsonObject.person.email;
           //构建的目标节点的格式为：
           /**
           <h2><a href=mailto:andy@clerrleft.com >Andy Ruben</a></h2>
               <a href=http://andy.com/ >http://andy.com/</a>
           */
          //10-3 a节点 :<a href=mailto:andy@clerrleft.com >Andy Ruben</a>
           var aNode = document.createElement("a");
           aNode.appendChild(document.createTextNode(name))// name = Andy Ruben
           aNode.href = "mailto:" + email;
           
           //10-4 构建h2节点
            var h2Node = document.createElement("h2");
            h2Node.appendChild(aNode);
            
           //10-5 构建第二个a节点：<a href=http://andy.com/ >http://andy.com/</a>
           var aNode2 = document.createElement("a");
           aNode2.appendChild(document.createTextNode(website))// name = Andy Ruben
           aNode2.href = website;
           
           //10-6 :将重新构建的节点复赋给div
            var detialsNode = document.getElementById("detials");
            detialsNode.innerHTML = "";
            detialsNode.appendChild(h2Node);
            detialsNode.appendChild(aNode2);
            
           
          }
        } 
     }
     //2、取消a节点的默认行为
      return false;
   } 
  
 }
}
</script>
<body>
<h1>people</h1>
<ul>
    <li>  <a  href="files/andy.js">andy</a></li>
    <li>  <a  href="files/judy.js">judy</a></li>
    <li>  <a  href="files/jojo.js">jojo</a></li>
</ul>
<div id="detials"></div>
</body>
</html>

</pre><p></p><pre>

这个和传送XML格式数据的主要区别是解析更加容易了：

  if(request.status == 200 || request.status == 304){
           //10-1 结果为xml格式，所以需要responseText 来获取
            var result = request.responseText;
          
    //10-2 结果不能直接使用，必须先创建对应的节点，在把节点加入到 #details 中
              //使用eval将result字符串转化为JSON 对象
           var jsonObject = eval("(" + result + ")")
              
           var name = jsonObject.person.name;
           var website = jsonObject.person.website;
           var email = jsonObject.person.email;

四、JSON总结

优点;

1、作为一种数据传输格式，JSON与XML很相似，但是它更加灵巧

2、JSON不需要从服务器端发送含有特定内容类型的首部信息

缺点：

1、语法过于严谨

2、代码不易读

3、eval函数存在风险

五、三种格式的对比总结

1、如果应用程序不需要与其它应用程序共享数据的时候，使用HTML片段来返回数据最简单

2、如果数据需要重用，JSON数据是个不错的选择，其在性能和文件大小方面有一定优势

3、当远程应用程序未知时，使用XML文档是首选，因为XML是web服务的领域的“世界语言”

慢慢成长的我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax_数据格式_JSON（03）

一、JSON1、json 是一种简单的数据格式，比xml更加轻巧。JSON 是javascript原生格式，这意味这在javascript中处理JSON数据不需要任何特殊的API或者工具包2、JSON的规则很简单，对象是一个无序的 “名称/值” 对集合，一个对象以 ‘{’ （左括弧）开始，以 ‘}’（右括弧）结束每一个名称后面跟一个“：”（冒号），名称/值之间用逗号分隔开。
复制链接

扫一扫