josn教程（二）---json简介

最新推荐文章于 2024-05-23 12:00:03 发布

原创最新推荐文章于 2024-05-23 12:00:03 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #对象 #实例 #json

JavaScript笔记专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在HTML页面中使用JSON对象，并展示了具体的实例。同时，对比了JSON与XML的异同，阐述了为何在AJAX应用程序中推荐使用JSON。

首先，来看一个json在html页面中的一个实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br /> 
网站地址: <span id="jurl"></span><br /> 
网站 slogan: <span id="jslogan"></span><br /> 
</p>
<script>
var JSONObject= {
    "name":"菜鸟教程",
    "url":"www.runoob.com", 
    "slogan":"学的不仅是技术，更是梦想！"
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>

</body>
</html>

解释：上面实例定义了一个名称为JSONObject的json对象，该队长有三个属性，分别name，url，slogan。在脚本中，通过获取到指定的元素，然后将定义的JSONObject对象的值存放进指定id的span元素中。

知识点一：JSON与 XML 相同之处是什么？

JSON 是纯文本
JSON 具有"自我描述性"（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

知识点二：JSON与XML的不同之处是什么？

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

知识点三：那么我们为什么要使用json呢？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML
        读取 XML 文档
        使用 XML DOM 来循环遍历文档
        读取值并存储在变量中
使用 JSON
        读取 JSON 字符串
        用 eval() 处理 JSON 字符串