文档章节

JSON and Microsoft Technologies(翻译)

IT周见智
 IT周见智
发布于 2015/06/05 17:18
字数 3365
阅读 14
收藏 1
点赞 0
评论 0

本文翻译CodeProject(链接)上的一篇文章,文章对JSON的概念以及它在微软一些技术中的应用起到了非常好的扫盲作用,总结得非常好,适合初学者。

目录

  • 介绍
  • 什么是JavaScript对象?
    • 实验一:理解JavaScript对象
    • 实验二:JavaScript对象数组
  • 什么是XML以及为什么使用XML?
  • 什么是JSON?
    • 实验三:将JSON字符串转换为JavaScript对象
  • ASP.NET Web Forms中的JSON
    • 实验四:Get Request - JavaScript请求JSON数据
    • 实验五:Post Request – JavaScript发送JSON数据
  • ASP.NET MVC中的JSON
    • 实验六:Get Request – JavaScript请求JSON数据
    • 实验七:Post Request – JavaScript发送JSON数据
  • WCF中的JSON
    • 实验八:Get Request – JavaScript请求JSON数据
    • 实验九:Post Request – JavaScript发送JSON数据
  • Web API中的JSON
    • 实验十:Get Request – JavaScript请求JSON数据
    • 实验十一:Post Request – JavaScript发送JSON数据
  • 总结

 

介绍

通过这篇文章,我们将学习JSON的概念以及JavaScript是如何通过JSON与微软的一些技术(如ASP.NET MVC、ASP.NET Web Forms、WCF以及Web API)进行数据交互的。

 

什么是JavaScript对象?

JavaScript中包含两类事物:变量和函数。变量存储数据,函数负责执行特定动作。变量可以是int、string以及float或者对象类型。“JavaScript对象是一种包含了变量和函数的封装体”。

实验一:理解JavaScript对象

要理解JavaScript对象,我们并不需要创建一个ASP.NET MVC或者Web Forms的项目,而只需要创建一个简单的HTML文件即可。

第一步.打开Visual Studio,点击 文件->新建->文件,选择HTML类型文件如下图

第二步.按照以下方式创建JavaScript对象

第三步.使用“.”去访问JavaScript对象的属性

第四步.保存该HTML文件

第五步.使用你的浏览器打开该HTML文件

输出:

实验二:JavaScript对象数组

数组被定义成包含相同类型元素的集合。令人兴奋的是,JavaScript中也支持对象数组。

第一步.与实验一中相同

第二步.按照以下方式创建一个JavaScript对象数组

第三步.用浏览器打开HTML文件,见下图

 

什么是XML以及为什么使用XML

 

在上图中,一个人试图去跟一只狗交谈。他们会正确沟通吗?当然不能!他们各自使用各自的表达方式,并且都不能理解对方。

解决方案?

唯一的解决方案便是要有一个共同沟通标准,如果他们使用一种相互都能理解的方式去表达自己的想法,那么问题就解决了。

再回过头来看看,我们会发现任何两个不同的系统之间要想正常交互,它们都必须遵循一个共同的交互标准(如网络通信协议HTTP、TCP/IP等,译者注)。

XML

XML或者扩展标记语言是我们传输数据(消息)时需要遵守的一种规范。在互联网世界中,“交互”占了很重要的一个地位,这尤其体现在两个不同系统之间。

XML是一种数据传输规范,互联网中的数据可以按照此规范进行传输。几乎每种技术(系统、平台)均能理解XML。

XML的一个简单例子

打个比方,我们需要在互联网上传输“客户信息(客户姓名,地址以及年纪)”,首先我们需要使用XML将客户数据表示出来

以下是表示多个客户数据的XML

XML有哪些缺点?

XML主要有以下两个缺点

  • 解析困难。对于一些轻量级的技术类似JavaScript来说,XML解析并不简单。
  • 数据冗余。看看上面那个客户信息的XML例子,我们可以看到有很多不必要的标签存在。相比来说,XML要比我们接下来讲到的JSON冗余不少。

 

什么是JSON

JSON是另外一种不同平台(系统、技术)间交换数据的标准。

JSON怎样表示数据?

它表示数据的方式与JavaScript对象很相似

JSON怎样表示数据集合?

JSON和JavaScript对象是一个东西吗?

当然不一样。JSON是我们表示数据(传递数据)的一种方式,而JavaScript对象是在内存中存储数据的变量。它们之间并没有直接的关系,JSON被称为“JavaScript Object Notation”,因为它们结构非常相似。

JSON有哪些优点?

  • JSON非常简洁,它由一系列的“键/值”组成,而在XML中却存在大量冗余的标签。JSON比XML更轻量级。
  • 与XML一样,JSON是平台独立的。几乎所有技术(平台、系统)均能识别JSON数据。
  • 用JSON表示的数据可以更容易地转换成JavaScript对象(因为它两结构类似),所以对于JavaScript脚本来讲,处理JSON更轻松。

实验三:将JSON字符串转换为JavaScript对象

第一步.跟之前一样,创建一个HTML页面。

第二步.按照以下方式定义两个JSON字符串

简单JSON串:

包含多个客户信息的JSON串:

第三步.使用JavaScript中的JSON.parse方法将JSON串转换成JavaScript对象

第四步.按照下面的方式访问JavaScript对象中的属性

第五步.保存HTML文件,使用浏览器打开查看

 

注:现实开发过程中,在不同的系统(平台)内,JSON串可能被转换成各种不同的数据类型,如ASP.NET、WCF、JAVA等。

 

庆幸的是,有些技术可以自动转换JSON串。比如当我们直接发送JavaScript对象时,它先被自动转换为JSON串,发给服务器,接着服务器端自动将该JSON串转换成服务器端的数据类型,反之亦然。

接下来的每个实验都是验证JSON在Microsoft各种技术中的应用。在JavaScript代码中,我们使用到了jQuery。

初始化准备:

我们定义一个C#类,叫客户类

 

ASP.NET Web Forms中的JSON

在ASP.NET Web Forms中,我们要使用到HTTP handlers(ashx文件).

实验四:Get Request - JavaScript请求JSON数据

第一步.创建Web应用

第二步.创建HTTP Handler

右键项目,点击“添加>新建项”,新建ashx文件,命名CustomerWebForm.ashx

第三步.在ashx文件中编写代码

在默认的ProcessRequest方法中添加以下代码:

  • 创建一个Customer对象

  

  • 使用System.Web.Script.Serialization.JavaScriptSerialier将创建的Customer对象转换成JSON串

  

  • 将Response.ContentType由默认的text/plain改为text/json

  

  • 将JSON串写入Response的输出流

  

第四步.编写客户端(浏览器)请求JSON数据的代码

  • 在项目中添加新项,新建一个aspx页面,aspx页面中添加jQuery引用

  

  • 在页面中添加一个按钮,给它绑定点击事件

  

  • 在<HEAD>标签内部添加<Script>标签,并添加以下代码

  

第五步.执行测试

点击F5运行应用,点击页面中的Button按钮,查看输出

实验五:Post Request – JavaScript发送JSON数据

第一步.在实验四的项目基础上,再创建一个CustomerPost.ashx文件

第二步.在ProcessRequest方法中获得客户端发送来的JSON

第三步.编写客户端(浏览器)发送JSON的代码

  • 在原来的aspx页面中添加另外一个Button

  

  • 在<Script>标签中添加以下JavaScript脚本

  

第四步.执行测试

按F5运行应用,点击新添加的Button按钮,查看输出

现在我们得出结论:

  • JavaScript与Web Forms之间怎样建立通讯;
  • JavaScript与Web Forms之间怎样传递JSON数据。

下面我们来试着在ASP.NET MVC中做同样的事情。

 

ASP.NET MVC中的JSON

实验六:Get Request – JavaScript请求JSON数据

第一步.创建一个MVC4的应用程序

第二步.创建Controller和Action方法

  • 添加一个名为JsonTestController的控制器
  • 添加一个名为Index的Action方法

  

  • 添加一个名为JsonData的Action方法
  • 在JsonData方法中创建一个Customer对象并初始化属性
  • 在JsonData方法中调用基类的Json方法,该方法会返回一个JsonResult对象,该对象可以将Customer对象转换成JSON串

  

第三步.在客户端(浏览器)添加请求JSON数据的代码

  • 右键名为Index的Action,选择“添加View”为它创建一个叫Index的View

  

  • 跟在Web Forms中所做的操作一样

  在View中引用jQuery

  添加一个Button按钮,并绑定点击事件

  在页面<script>标签中添加以下JavaScript代码

  

第四步.运行测试

按F5运行应用

实验七:Post Request – JavaScript发送JSON数据

第一步.在原有项目相同的Controller中,创建一个名为JsonPost的Action方法

第二步.编写客户端(浏览器)发送JSON数据的代码

  • 在原有View(aspx页面)中添加另一个Button

  

  • 在<script>标签中添加以下JavaScript代码

  

注:在ASP.NET MVC中,并没有要求你显式地将JavaScript对象转换成JSON串,反之亦然。这些工作系统内部默认自动完成了。

第三步.运行测试

按F5运行应用,点击Button按钮查看输出

 

WCF中的JSON

接下来,服务器端技术我们使用WCF REST。

实验八:Get Request – JavaScript请求JSON数据

第一步.创建WCF项目

第二步.移除不必要的文件

移除IService1.cs和Service1.svc文件

第三步.创建新服务

右键项目,点击添加>新建项。选择WCF Service,命名为JsonTest。这个过程会在项目中创建两个新内容,一个是IJsonTest.cs(服务协议),另一个是JsonTest.svc(具体服务)。

第四步.创建操作协议

打开IJsonTest.cs文件,添加一个名为GetJsonData的方法

第五步.实现操作

打开JsonTest.svc文件,实现GetJsonData方法

第六步.创建一个Rest节点

  • 打开Web.config配置文件
  • 找到System.ServiceModel节点

  

  • 在该节点内部新增加services标签,在新增加的标签内部创建service标签,指向我们刚创建的服务

  

  • 在新增加的service节点中作如下配置

  

第七步.给GetJsonData方法添加WebInvoke属性

第八步.在客户端(浏览器)中编写请求JSON数据的代码

  • 新建一个HTML文件,命名为WCFRestClient.html,在页面中引用jQuery
  • 跟前面几个实验一样,在页面中添加一个Button按钮,并绑定点击事件

  

第九步.运行测试

按F5运行,打开WCFRestClient.html页面,点击按钮

实验九:Post Request – JavaScript发送JSON数据

第一步.创建新的操作协议

在IJsonTest.cs中再新添加一个方法,命名为PostJsonData

第二步.实现操作

打开JsonTest.svc文件,实现刚新添加的PostJsonData方法

第三步.给PostJsonData方法添加WebInvoke属性

第四步.在客户端(浏览器)中编写发送JSON的代码

  • 在原来的WCFRestClient.html页面中,再新加一个Button按钮,绑定点击事件
  • 在<script>标签中编写如下JavaScript代码

  

注意不再是使用$.post方法,而是使用$.ajax。因为我们需要设置contenttype属性为application/json。$.post是$.ajax的一个封装,没有$.ajax灵活。

第五步.运行测试

按F5运行应用

 

Web API中的JSON

我们知道,WCF Rest让我们可以创建HTTP服务,但是,它真正的目的是为了支持SOA。在微软技术中,我们还可以使用ASP.NET Web API来创建HTTP服务。

我将来会着重讨论Web API和WCF Rest。这次我们就把注意力集中在WebAPI与JavaScript的交互上。

实验十:Get Request – JavaScript请求JSON数据

第一步.创建Web API项目

打开Visual Studio,点击文件>新建>项目,选择ASP.NET MVC4项目。在模板选择对话框中,选择WebAPI,点击OK

第二步.移除所有不必要的文件

移除所有已经存在的Controller,View以及CSS文件。

第三步.创建APIController

  • 右键Controller,选择添加>Controller
  • 在添加Controller对话框中键入名称,如JsonController
  • 选择一个空白的API Controller模板
  • 点击OK

第四步.创建Action方法

你会发现JsonController的基类是APIController(不是Controller,译者注),接下来在JsonController类中新加一个名为GET的Action方法

第五步.在客户端(浏览器)中编写请求JSON数据的JavaScript代码

  • 创建一个新的Controller,命名为TestingController。注意这里的TestingController不再派生自APIController。
  • 在TestingController中新添加名为Index的Action方法

  

  • 右键名为Index的Action方法,为其添加View,命名为index
  • 在新创建的View中引用jQuery
  • 在新创建的View中添加一个Button按钮,绑定点击事件
  • 在<script>标签中编写如下JavaScript代码

  

第六步.运行测试

按F5运行程序

实验十一:Post Request – JavaScript发送JSON数据

第一步.在上面的JsonController中新加一个名为Post的Action方法

第二步.在客户端(浏览器)中编写发送JSON数据的代码

  • 在原有的View页面新增加一个Button按钮,绑定点击事件
  • 在<script>标签中添加如下JavaScript脚本

  

第三步.运行测试

最后,我们测试完了JSON在所有与微软有关技术中的应用。

 

总结

通过本文,我们学习了JSON的概念、JSON的优点以及它在微软技术中的一些应用。

 

© 著作权归作者所有

共有 人打赏支持
IT周见智

IT周见智

粉丝 10
博文 61
码字总数 185891
作品 0
西青
ECMA-262 Introduction (简介)

Introduction 简介 This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was inv......

死章鱼啦 ⋅ 2011/03/28 ⋅ 0

Windows Azure真实案例:Infosys Technologies --使用SQL Data Services(现为SQL Azure)为汽车经销商创建了基于云的方案

公告 :本博客为微软云计算中文博客 的镜像博客。 部分文章因为博客兼容性问题 ,会影响阅读体验 。如遇此情况,请访问 原博客 。 Infosys Technologies Infosys Technologies Ltd. 是一家引...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

(十五)Flask 学习 —— Ajax

Ajax 这将是国际化和本地化的最后一篇文章,我们将会尽所能使得 microblog 应用程序对非英语用户可用和更加友好。 不知道大家平时有没有见过网站上有一个 “翻译” 的链接,点击后会把翻译后...

水果糖 ⋅ 2016/02/26 ⋅ 0

专利勒索者想起诉GitHub,结果告了托管商Rackspace

Personalweb Technologies and Level 3 Communications向Rackspace提起了法律诉讼,指控GitHub侵犯了它的九项专利,而实际上Rackspace和GitHub只有托管关系,Rackspace对此回应说,起诉者显然...

oschina ⋅ 2012/09/19 ⋅ 18

《Zend Framework 2 程序员参考指南》 一、概述 Overview

Zend Framework 2是一个使用PHP 5.3+(含以上版本)开发WEB应用程序和服务的开放源代码的框架(framework)。Zend Framework 2使用100%的面相对象代码,并且利用了大部分PHP5.3 的新功能,命...

v8v9v3000 ⋅ 2013/10/03 ⋅ 0

神经网络和深度学习

neural networks.jpg 我是薛银亮,感谢英文原版在线书籍,这是我学习机器学习过程中感觉非常适合新手入门的一本书。鉴于知识分享的精神,我希望能将其翻译过来,并分享给所有想了解机器学习的...

薛银亮 ⋅ 2017/11/03 ⋅ 0

没有AI芯片,你的手机也能实现离线神经网络机器翻译

     编者按:去年10月份,微软跟华为合作,首先在具有AI芯片的Mate 10手机上实现了AI驱动型离线翻译功能。现在,Microsoft Translator将这一功能扩展到所有安卓、iOS和亚马逊Fire设备,...

微软亚洲研究院 ⋅ 04/19 ⋅ 0

CA Technologies选择Windows Azure提供备份和恢复解决方案

CA Technologies最近宣布其业界领先的CA ARCserve 备份和恢复技术,将作为一个基于Windows Azure平台的服务软件(SaaS)提供给用户。 新的基于Windows Azure的解决方案计划在2011年下半年可用...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

34 家公司签署“不协助政府黑客行动”协议,苹果、谷歌、亚马逊和英特尔不在名单上

雷锋网消息,外媒美国时间 4 月 17 日报道称,在 RSA 2018 安全会议上,以微软为首的 34 家高科技公司签署了一项技术协议,同意不惜一切代价保护客户免受网络犯罪和国家行为的网络攻击,同时...

李勤 ⋅ 04/18 ⋅ 0

在asp.net2.0中使用Jquery调用Web Service[附源代码]

代码:/Files/zhuqil/JSONDemo.zip 介绍: 我们都知道,默认情况下,一个asp.net Web Service 返回的数据格式是XML的,处理XML数据总是会花费一些开销,最近,另外一种JSON的格式非常流行并且...

王二狗子11 ⋅ 01/01 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 20分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

楠木楠 ⋅ 32分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部