JSON简介与JS解析JSON

编程技术  /  houtizong 发布于 2年前   146

JSON大家不会陌生,但是本人还是刚刚深入了解了一下,特作此总结。


首先什么是JSON:
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言
JSON 具有自我描述性,更易理解
JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言

如何解析:
JavaScript程序能够使用内建的 eval() 函数用 JSON 数据来生成原生的 JavaScript。主流浏览器都是支持该函数的。

类似 XML:
JSON 是纯文本
JSON 具有“自我描述性”(人类可读)
JSON 具有层级结构(值中存在值)
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

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

JSON 语法规则:
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON 值可以是:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
数组(在方括号中)
对象(在花括号中)
null

JSON 文件:
JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

 

 

对于 eval() 函数,他是JS中的一个方法,可计算某个字符串,并执行其中的的 JavaScript 代码。

该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。

如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 EvalError 异常。

可以做几个例子来说明一下他的使用:

<script type="text/javascript">eval("x=10;y=20;document.write(x*y)")document.write(eval("2+2"))var x=10document.write(eval(x+17))</script>

 

会输出以下内容:

200427

 

这就像你给了一条SQL语句然后执行返回结果一样。

对于参数的合法检测,可以使用以下代码:

try  {     alert("Result:" + eval(prompt("Enter an expression:","")));}catch(exception) {     alert(exception);}

 

 

一般来说,对于JSON的应用,都是前台使用AJAX请求,后台要返回的对象集合使用JSON来表达传递到前台

我们来做一个Servlet,他返回一个JSON字符串给前台:

package com;import java.io.*;import javax.servlet.*;import javax.servlet.http.*;@SuppressWarnings("serial")public class ServiceAjax extends HttpServlet {public ServiceAjax() {super();}public void destroy() {super.destroy();}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.write("[{id:1,name:'cui'},{id:2,name:'su'},{id:3,name:'qiang'}]");out.flush();out.close();}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}public void init() throws ServletException {}}

 

前台接收到返回的字符后使用eval()进行解析,然后弹出其内容:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>XMLHttpRequest对象学习</title>    <script type="text/javascript" language="javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}else {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200) {var objs = eval(xmlhttp.responseText);for(i=0;i<objs.length;i++){var user = objs[i];alert(user.id + "-->" + user.name);}}}var url = "<%=basePath %>ServiceAjax";xmlhttp.open("POST",url,true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");// 增加time随机参数,防止读取缓存xmlhttp.send("time=" +  + Math.random());}    </script>  </head>    <body>    <div id="myDiv"></div>    <input type="button" name="bxml" value="Read" onclick="loadXMLDoc()" />  </body></html>

 

如果你对于JS解析XML和关于JS的AJAX有任何疑惑,你可以访问:

JS跨浏览器解析XML应用

JavaScript中XMLHttpRequest对象初步使用

也许以上内容可以帮到你。

 

请您到ITEYE看我的原创:http://cuisuqiang.iteye.com

或支持我的个人博客,地址:http://www.javacui.com

 

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

留言需要登陆哦

技术博客集 - 网站简介:
前后端技术:
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成

网站主要作用:
1.编程技术分享及讨论交流,内置聊天系统;
2.测试交流框架问题,比如:Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识,如有侵权请发邮件到站长邮箱,站长会尽快处理;
4.站长邮箱:[email protected];

      订阅博客周刊 去订阅

文章归档

文章标签

友情链接

Auther ·HouTiZong
侯体宗的博客
© 2020 zongscan.com
版权所有ICP证 : 粤ICP备20027696号
PHP交流群 也可以扫右边的二维码
侯体宗的博客