使用JSON实现代码分离
在学习JSON之前,当我在写大量JSP页面的时候,产生动态数据一般采用两种途径:
1.直接在页面中写java代码
2 采用各种标签代替
这两种用法的支持者都很多,但是我发现就算是采用标签也好,对于页面的重用还是无能为力,比如有几个页面都需要用到一个item数据,一个是管理用户页面,一个是订单页面。我们既要在管理用户的servlet写上setAttribute('item',item),也要在管理订单的servlet写上setAttribute('item',item);然后在页面上通过getAttribute()获得数据:
Java代码
<%for(int i=0;i<item.length;++i){%>
html tag ...
<%}%>
或者采用标签的形式:
Java代码
<ww:iterator value="item">
html tag...
<ww:iterator>
很多时候我们会采用 <jsp:inclue page="common.jsp"/>来重用这样的页面,但这里有个问题,如果多个的页面样式不一样呢?如果数据不是很多呢,这样会产生很多页面碎片,实践已经证明,重用页面并不是一个好办法.
有时候我想,如果我能单独用一个action来提供输出数据,每个需要这些数据的页面页面都去获取这些数据,关于这些数据在页面如何渲染是页面的问题,这个action只提供数据,这样我们重用数据不是比重用页面好很多么?
但是之前的技术并不能支撑这样的实现,一个页面如何自己主动去访问它需要的数据呢?
答案是当然是通过AJAX技术.但今天我介绍的是另外一种技术JSON.
先简单的介绍一下JSON(虽然很多人已经知道),JSON JavaScirp Object Notion 可以看成一段javascript对象树,比如 user.id 表示的是user对象的id,如果对webwork或则是srtus2.0熟悉的朋友应该对此并不陌生,对象树可以嵌套对象,比如user.cat.age 表示user对象的成员cat的年龄。除了对象还可以嵌套数组方法user.cat[0].sayHello();
我们这样声明一个JSON:
Java代码
var user = { id:’1’, name:’sanyun’};
alert(user.id) //输出1
user = { id:’1’, cat:{age:2,color:’white’ }};
alert(user.cat.age) //输出2
但是JSON本身是不能和后端通信的,不过我们可以通过
Java代码
<script type="text/javascript" src="后端资源"> </script>
来和服务器后端通信.
我们可以把它封装成一个方法:
Java代码
function CallBack(model) {
this.model = model;
}
CallBack.init = function (url) {
var headElement = document.getElementsByTagName("head").item(0);
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", url);
headElement.appendChild(scriptTag);
};
不过需要注意的是采用这种方式后台MIME必须要设置为 html/Javascritp,当然你也可以轻松把这种方式替换成Ajax.
解析
通信之后我们需要做的是解析数据,一般来说,我们可以通过for in 简单的遍列JSON
Java代码
//model表示后端产生的JSON
CallBack.update(model){
for(i in model){
var node =document.getElementByID(i);
if(node){
node.value = model[i];
}
}
}
后台
Java代码
public class ShowType extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.addHeader("Cache-Control", "no-cache"); //(1)
response.setContentType("HTML/JavaScript;charset=GBK");//(2)
PrintWriter out = response.getWriter();
String json = ” {name:'jiangyunpeng', status:'1',sex:'female'} ”//(3)
out.print("CallBack.update("+json+")"); //(4)
}
}
(1)首先需要设置缓存为空
(2)然后MIME必须要设置为 html/Javascritp
(3)产生一段JSON,这里我们是手动产生的,可以采用JSON开源框架
(4)调用我们前面页面定义的JS函数
通过这样处理了之后我们的页面再也没有任何JAVA代码或者自定义标签了,他完全是一个HTML页面(当然这里为了演示,把解析JSON过程过于简单化了),他具有这些好处:
1.它是一个HTML,响应速度比JSP快
2.对于一些表单元素,比如checkbox,select,如果采用java代码会很繁琐,
Java代码
function initCheckbox(){
if('<%=status%>'==1){ //这里有JAVA代码
document.getElementById('checkbox').checked = true;
}else{
document.getElementById('checkbox').checked = fasle;
}
}
但是如果采用JSON的话
Java代码
function initCheckbox(){
if(status==1){ //这里只有JSON
document.getElementById('checkbox').checked = true;
}else{
document.getElementById('checkbox').checked = fasle;
}
}
我们可以把这段代码放在解析方法里面,判断查询的对象如果是checkbox,就像上面这样处理,这样我们就可以更本不用关心它是否是checkbox
3.重用了数据.多个页面可以通过JSON访问相同的数据,这里没有setAttribute(),也不用考虑生命周期。
4.降低了服务器端的负载。因为我们把解析的数据任务放在客户端里面进行,服务器只需要产生一些JSON字符串。
5.分离了JAVA代码和JS,诸如验证,判断,很多时候在javascript里面嵌套java,可读性很差。
小结:我觉得采用JSON是个不错的选择,大家可以试试。原来大伙早知道啦!
参考:http://www.javaworld.com/javaworld/jw-11-2006/jw-1115-json.html
我也是在用JSON,但不是像这样的动态生成js脚本,而是为了处理大批表格数据的读取问题,用struts(1.2)的action来生成json字符串,再用response.getWriter().write()输出到页面,ExtJS自然就是用Ext.data.JsonStore来读取了。这种方式的效率比较高,也达到了代码分离的目的,逻辑层和数据访问层根本无需暴露在web上,页面虽然是jsp,也无需使用<%%>或者struts标签。欢迎交流~
我先贴部分代码上来和大家交流一下,目前处于开发初期阶段,稍后我才做一个sample放上来。
Java代码
/**
* 向浏览器输出JSON字符串
* @param response HttpServletResponse对象
* @param obj 任意对象,可以是List,也可以是单个对象
*/
public void writeJsonString(HttpServletResponse response, Object obj) throws IOException {
if( obj == null ) {
this.exception = "obj参数为空";
logger.error(this.exception);
throw new NullPointerException(this.exception);
}
JSONArray array = JSONArray.fromObject(obj);
try {
String json = array.toString();
if( json.startsWith("[") ) {
json = json.substring(1);
}
if( json.endsWith("]") ) {
json = json.substring(0, json.length()-1);
}
response.setCharacterEncoding("utf-8");
response.getWriter().write(json);
} catch (IOException e) {
this.exception = "向浏览器输出JSON字符串时发生错误";
logger.error(this.exception);
logger.error(e);
throw new IOException(this.exception);
}
}
这里是js部分
Java代码
var store = new Ext.data.JsonStore({
url: '../demo.do', //请大家根据实际情况修改action路径
root: 'data', //传回来的JSON字符串是HashMap生成的,data对应具体的数据集,一般是List对象
totalProperty: 'totalCount', //总记录数,整型
id: 'id',
fields: ['title', 'state', {name:'createDate', type: 'date'}, 'author', {name:'id', type:'int'}]
});
store.setDefaultSort('id', 'asc');
store.load({params:{start:0, limit:25}}); //传两个URL参数做分页处理
分享到:
相关推荐
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息...基于Servlet+GSON+VueElementAdmin的自设计链式SQL查询JSON前后端分离原生无框架教务系统源码+项目说明.zip
Spring-Security结合JWT 实现前后端分离完成权限验证功能案例,案例中,主要完成用户登录获取Token,通过Token访问Rest接口,没有权限或授权失败时返回JSON,前端根据状态码进行重新登录;案例中的用户名称: jake_j...
3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于springmvc+mybatis+mysql和bootstrap的后勤报修系统源码+项目说明(使用json前后分离)(毕业设计).zip 基于...
APIJSON 是一种专为 API 而生的 JSON 网络传输协议 以及 基于这套协议实现的 ORM 库。 为各种增删改查提供了完全自动化的万能通用接口,零代码实时满足千变万化的各种新增和变更需求。能大幅降低开发和沟通成本,...
APIJSON 是一种专为 API 而生的 JSON 网络传输协议 以及 基于这套协议实现的 ORM 库。为各种增删改查提供了完全自动化的万能通用接口,零代码实时满足千变万化的各种新增和变更需求。能大幅降低开发和沟通成本,简化...
毕业设计,基于Python+Flask开发的前后端分离实现房屋租赁民宿预订平台,内含Python完整源代码,数据库脚本 Python基于Flask框架前后端分离实现房屋租赁民宿预订平台毕业源码案例设计 技术环境: PyCharm + Flask +...
简单来说,前端使用AJAX请求后台接口,后台都数据进行处理后返回给前端,这个过程我们多半使用json格式来传递数据(也可以使用XML等),而对于前端使用Vue、React、Angular甚至Jquery都是没有关系的,同样对后端的...
前后端分离,通过 Json 进行数据交互,前端无需关注后端技术 引入RabbitMQ 消息队列,用于邮件发送、更新 Redis 和 Solr 采用Minio搭建对象存储服务,同时引入七牛云对象存储 引入ElasticSearch 和 Solr 作为全文...
APIJSON 是一种专为 API 而生的 JSON 网络传输协议 以及 基于这套协议实现的 ORM 库。 为各种增删改查提供了完全自动化的万能通用接口,零代码实时满足千变万化的各种新增和变更需求。 能大幅降低开发和...
本系统将工作流引擎与工单系统分离,目的在于解耦减少业务对工作流的入侵,以便于业务后期各种复杂报表统计。本系统同时支持在线工作与任务交接,弥补了传统BPM工作流需单独处理的不足,方便公司人员流动后的工作...
Python基于Flask框架前后端分离实现房屋租赁民宿预订平台毕业源码案例设计 技术环境: PyCharm + Flask + Python2.7或Python3.6 + Redis + mysql 技术简介:采用Python环境和Flask框架实现的一个爱家租房平台,整个...
前后端分离:前端使用ajax访问后端的rest服务,后端返回json格式数据。页面用nginx反向代理访问。 支付功能:实现微信和支付宝支付客户端。 日志:Logback打印日志,默认打印Web和Service简要日志。 工具类:字符串...
基于Spring Boot的厨艺交流平台的设计与实现代码是一个包含了前端和后端的完整项目,旨在为用户提供一个在线分享、学习和交流烹饪技巧的平台。该项目采用了主流的前后端分离架构,后端使用Spring Boot框架,前端则...
主要介绍了spring boot 统一JSON格式的接口返回结果的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
业务逻辑上通过Flyboot框架,实现对接口的解析以及系列逻辑判断,将最终的结果以JSON格式的数据响应给前端。 前端采用JavaScript技术,通过Vue的Nuxtjs框架和React框架,实现了用户交互界面以及中后台管理界面。通过...
前后端分离,通过 Json 进行数据交互,前端无需关注后端技术 采用 Nacos 作为服务注册中心,支持分布式集群架构,方便微服务配置管理 采用 Getaway 搭建网关服务,进行负载转发的同时对用户身份进行识别,并支持配置...
通过Thymeleaf模板引擎实现Java代码和前端代码分离,前端服务器访问后端服务器提供的接口,返回Json数据给前端进行渲染。实行前后端分离以达到前后端能够各司其职,前端注重服务的使用,后端注重服务的提供。代码...
php容器和nginx容器,php-fpm处理PHP代码,nginx处理纯前端和静态资源,实现前分离。。php容器中安装有(bcmath,Core,ctype,curl,date,dom,fileinfo,filter,ftp, gd,hash,iconv,json,libxml,mbstring...
一个简单的前后端分离Demo,前后端交互JSON数据格式 软件架构 后端基于Maven构建,采用Jdbc完成数据持久化操作。代码分层编写,分为Controller控制器层,Service业务逻辑层,dao持久化层,以及相对应的工具类。 ...