[转]JSON and Microsoft Technologies(翻译)
本文翻译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的优点以及它在微软技术中的一些应用。
转自:http://www.cnblogs.com/xiaozhi_5638/p/4185223.html
[转]JSON and Microsoft Technologies(翻译)的更多相关文章
- JSON and Microsoft Technologies(翻译)
本文翻译CodeProject(链接)上的一篇文章,文章对JSON的概念以及它在微软一些技术中的应用起到了非常好的扫盲作用,总结得非常好,适合初学者. 目录 介绍 什么是JavaScript对象? 实 ...
- 强大的微软Microsoft Translator翻译接口
一.前言 当我们需要对日文.韩文等语言转换中文字符的时候,就用到了微软提供的翻译接口. 二.实现流程 1.首先注册一个账号 https://datamarket.azure.com/account 2 ...
- 谷歌/微软/必应web页面免费翻译插件
随着网络时代的日益壮大,现在我们经常需要浏览一些各种外语的网页,或者是查阅资料帮助我们解决问题.更多的时候还是头疼在语言障碍上,正所谓"它认识你,你不认识它啊."谷歌和微软两个企业 ...
- Azure AI 服务之文本翻译
当下人工智能可谓是风头正劲,几乎所有的大厂都有相关的技术栈.微软在 AI 领域自然也是投入了重注,并且以 Azure 认知服务的方式投入了市场: 也就是说作为开发者我们不需要学习太多 AI 的理论知识 ...
- web翻译——插件
很多时候,可能我们web项目中需要的只是机械式的翻译,并不需要什么利用xml或者js json等等实现逼真翻译,那样工作量太大.这时候可能你就需要这几款小工具来帮助你.当然,如果 对翻译或者你的项目外 ...
- 日常API之百度翻译
百度翻译是什么,可以吃吗?相信很多人都熟悉,它是我们生活中必不可少的一只东东. 但是,百度翻译开发平台只有每月只能翻译200万个字符,多出的要按照49.00/百万字符来算.对于我酱紫的乞丐程序员来说, ...
- .NetCore获取Json和Xml格式的配置信息
本篇将和大家分享的是:如何获取Json和Xml格式的配置信息,主要介绍的是Configuration扩展方法的使用,因为netcore的web应用在Startup中已经默认嵌入appsettings. ...
- Python实现翻译功能
初入Python,一开始就被她简介的语法所吸引,代码简洁优雅,之前在C#里面打开文件写入文件等操作相比Python复杂多了,而Python打开.修改和保存文件显得简单得多. 1.打开文件的例子: fi ...
- Adding appsettings.json to a .NET Core console app
This is something that strangely doesn’t seem to be that well documented and took me a while to figu ...
随机推荐
- 在sd卡,创建目录和文件
在本文中,sd卡的情况下创建的文件和目录,介绍如何创建目录和文件的重点. 1. 路径问题(以下的样例是在Java中測试的,在Android中相同适用) 1.1 假设须要在目录中创建文件的目录存在,直接 ...
- Learn Python More
0, 看了一个python项目开源源码, 才知道现在这点python知识实在是弱爆了.. 尼玛就像学了2500个常用汉字, 然后要去理解"楚辞".. 代码如下, 解释一点一点从网上 ...
- Binary Tree Maximum Path Sum [leetcode] dp
a(i):在节点i由于单边路径的最大结束 b(i):在节点i路径和 a(i) = max{ i->val, i->val + max{a(i->left), a(i->righ ...
- Android Loader使用,屏幕解锁,重复荷载
正在使用AsyncTaskLoader时间.当手机被解锁,重复加载数据,码,如以下: static class CouponShopQueryLoader extends AsyncTaskLoade ...
- GitHub版本控制
版本控制-GitHub 前面几篇文章,我们介绍了Git的基本用法及Git服务器的搭建,本篇文章来学习一下如何使用GitHub.GitHub是开源的代码库以及版本控制库,是目前使用网络上使用最为广泛的服 ...
- Javascript学习2 - Javascript中的表达式和运算符
原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符, ...
- EF中的transaction的使用范例
注意一点: 在EF中使用事物后,对于一个新增的model,在saveChanges后,可以得到该实体的自增ID,但在提交事物之前, 该数据并没有真正的新增到DB中,但此时可以得到model新增的自增I ...
- (转).net webconfig使用IConfigurationSectionHandler自定section
自定义配置结构 (使用IConfigurationSectionHandler) 假设有以下的配置信息,其在MyInfo可以重复许多次,那么应如何读取配置呢?这时就要使用自定义的配置程序了.<m ...
- 如何学习ACM
我想对未来的同学有几句话要说: 1 我们几乎没有noi上来的队员,大家只能依靠后期的更加刻苦的努力. 2 我们没有专业的班级或者机制形成职业ACM队伍,所以大家只能尽早的投入进来,用尽一切课余时间去训 ...
- php_ThinkPHP的RBAC(基于角色权限控制)详解
一.什么是RBAC 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注. 在RBAC中,权限与角色相关联,用户通 ...