`
san_yun
  • 浏览: 2663034 次
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

使用JSON实现代码分离

    博客分类:
  • java
阅读更多
在学习JSON之前,当我在写大量JSP页面的时候,产生动态数据一般采用两种途径:
1.直接在页面中写java代码
2 采用各种标签代替
   这两种用法的支持者都很多,但是我发现就算是采用标签也好,对于页面的重用还是无能为力,比如有几个页面都需要用到一个item数据,一个是管理用户页面,一个是订单页面。我们既要在管理用户的servlet写上setAttribute('item',item),也要在管理订单的servlet写上setAttribute('item',item);然后在页面上通过getAttribute()获得数据:
  <%for(int i=0;i<item.length;++i){%>
      html tag ...
  <%}%>

或者采用标签的形式:
  <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:
var user = { id:’1’, name:’sanyun’};	
alert(user.id)	//输出1
user = { id:’1’, cat:{age:2,color:’white’ }};
alert(user.cat.age)	//输出2


  但是JSON本身是不能和后端通信的,不过我们可以通过
<script type="text/javascript" src="后端资源"> </script>

来和服务器后端通信.
我们可以把它封装成一个方法:
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
   //model表示后端产生的JSON
CallBack.update(model){
  for(i in model){
     var node =document.getElementByID(i);
     if(node){
       node.value = model[i];
     }
  }
}

后台
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代码会很繁琐,
   function initCheckbox(){
     if('<%=status%>'==1){  //这里有JAVA代码
        document.getElementById('checkbox').checked = true;
     }else{
        document.getElementById('checkbox').checked = fasle;
      }
  }

但是如果采用JSON的话
  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
分享到:
评论
9 楼 笨笨狗 2007-11-14  
应该是text/javaScript才对
8 楼 san_yun 2007-11-14  
san_yun 写道

参考:http://www.javaworld.com/javaworld/jw-11-2006/jw-1115-json.html
7 楼 hax 2007-11-12  
san_yun 写道
确实有这种ContentType


请给出reference。
6 楼 san_yun 2007-11-12  
hax 写道
junjie_2006 写道
初学的,今天才知道 "HTML/JavaScript" 还有这种ContentType啊


反话?

如果当真那就惨了。


确实有这种ContentType
5 楼 hax 2007-11-12  
junjie_2006 写道
初学的,今天才知道 "HTML/JavaScript" 还有这种ContentType啊


反话?

如果当真那就惨了。
4 楼 junjie_2006 2007-11-11  
初学的,今天才知道 "HTML/JavaScript" 还有这种ContentType啊
3 楼 allenleex 2007-11-09  
补充:Action是这样写的,无需转向。

public ActionForward execute(ActionMapping mapping, ActionForm form,
	HttpServletRequest request, HttpServletResponse response)
	throws Exception {

	//调用业务层获得HashMap对象
	DocumentDao documentDao = (DocumentDao)this.getBean(DocumentDao.BEANNAME);
	int[] params = this.getPagingParams(request);
	HashMap map = documentDao.getDocuments(params[0], params[1]);

	//看我上面封装的方法
	this.writeJsonString(response, map);

	return null; //无需转向,返回null即可
}
2 楼 kaki 2007-11-09  
很细致的范例,感谢。

不过dwr也可以得到类似的效果/
1 楼 allenleex 2007-11-09  
我也是在用JSON,但不是像这样的动态生成js脚本,而是为了处理大批表格数据的读取问题,用struts(1.2)的action来生成json字符串,再用response.getWriter().write()输出到页面,ExtJS自然就是用Ext.data.JsonStore来读取了。这种方式的效率比较高,也达到了代码分离的目的,逻辑层和数据访问层根本无需暴露在web上,页面虽然是jsp,也无需使用<%%>或者struts标签。欢迎交流~

我先贴部分代码上来和大家交流一下,目前处于开发初期阶段,稍后我才做一个sample放上来。

/**
 * 向浏览器输出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部分

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参数做分页处理


还需要说明的是:需要json-lib-2.1-jdk15.jar, ezmorph-1.0.3.jar,到附件中取。

相关推荐

    SSM中通过Json做前后端分离示例源码

    SSM(Spring、SpringMVC、MyBatis)框架是Java Web开发中常见的...开发者可以通过学习这个例子,理解如何在SSM中实现前后端分离,利用JSON进行数据交换。这有助于提高项目的可维护性,让前后端可以更高效地协同工作。

    VUE.js+element-ui实现JSON编辑器

    在前后端分离的开发模式下,JSON常被用于服务器与客户端之间的数据传输。 首先,为了运行这个项目,你需要确保已经安装了Node.js环境,因为Vue.js项目通常依赖于npm(Node包管理器)来管理其依赖和构建流程。你可以...

    JS各种分离代码

    在本文中,我们将探讨几个关键的代码分离方法,并通过实例来展示它们的用法。 1. **函数封装**:将相关的代码段封装到函数中是基础的代码分离技巧。函数可以重复使用,减少代码冗余,同时将特定功能隔离。例如: `...

    基于Servlet+GSON+Vue的自设计链式SQL查询JSON前后端分离原生无框架教务系统源码+项目说明.zip

    【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息...基于Servlet+GSON+VueElementAdmin的自设计链式SQL查询JSON前后端分离原生无框架教务系统源码+项目说明.zip

    json-rpc-java-1.0源代码

    通过对源代码的深入研究,可以了解JSON-RPC请求的构建过程、网络通信的实现方式(例如,是否使用HTTP/HTTPS,或者自定义协议)、异常处理机制以及服务注册和调用的细节。 6. 应用场景: JSON-RPC广泛应用于微服务...

    (毕业设计)基于springmvc,mybatis,mysql和bootstrap的后勤报修系统,使用json前后分离

    【标题】:“(毕业设计)基于SpringMVC,Mybatis,MySQL和Bootstrap的后勤报修系统,使用JSON前后分离” 这个毕业设计项目旨在构建一个高效、便捷的后勤报修系统,利用现代Web开发技术实现前后端分离,提高用户...

    html+SpringMVC+MyBaties+Json实现分类查询并导出EXCEL

    在本项目中,"html+SpringMVC+MyBaties+Json实现分类查询并导出EXCEL" 是一个综合性的Web应用开发实例,主要涉及了前端HTML、后端SpringMVC框架、持久层MyBatis以及数据交互的JSON格式,同时实现了数据的Excel导出...

    使用JSON实现数据的跨域传输的php代码

    通过上述知识点,我们可以得出使用JSON实现数据跨域传输的一般步骤: - 后端PHP脚本生成JSON数据。 - 将JSON数据嵌入到`&lt;script&gt;`标签的`src`属性中。 - 前端JavaScript代码在页面加载时执行这个`&lt;script&gt;`标签,...

    json实现前后台的相互传值详解.docx

    ### JSON实现前后台相互传值详解 #### 一、引言 在现代Web开发中,前后端分离架构已经成为主流趋势之一。在这种架构模式下,前端负责用户界面与交互逻辑,而后端则专注于业务逻辑处理与数据管理。为了实现前端与...

    Html5页面内使用JSON动画的实现

    示例代码展示了如何将JavaScript和JSON文件分离,并通过cdn方式加载JavaScript库。通过创建一个单独的HTML文件,我们可以将JavaScript和JSON文件引用到页面中,并通过设置合适的参数,例如容器、渲染器、是否循环...

    (毕业设计)基于springmvc,mybatis,mysql和bootstrap的后勤报修系统,使用json前后分离.zip

    前端通过发送AJAX请求,将用户操作转化为JSON格式的数据发送到后端,后端处理完业务逻辑后,同样以JSON格式返回结果给前端,这样可以实现无刷新的交互体验,提升用户满意度。 总的来说,这个后勤报修系统结合了...

    struts2使用jquery整合ajax、json用户登录实例源码

    它提供了一种组织应用程序的方式,使得业务逻辑与表现层分离,提高了代码的可维护性和可扩展性。jQuery则是一个轻量级的JavaScript库,简化了DOM操作,事件处理,动画制作以及Ajax交互。在本实例中,我们将探讨如何...

    Spring-Boot结合Security+JWT 简单实现前后端分离用户登录、授权案例

    Spring-Security结合JWT 实现前后端分离完成权限验证功能案例,案例中,主要完成用户登录获取Token,通过Token访问Rest接口,没有权限或授权失败时返回JSON,前端根据状态码进行重新登录;案例中的用户名称: jake_j...

    通过 JSON 来配置你的组件属性(颜色,字体,Title 等等).zip

    在这个名为"通过 JSON 来配置你的组件属性(颜色,字体,Title 等等).zip"的开源项目中,开发者使用Swift编写了一个强大的且易于使用的样式框架,名为StyleKit。这个框架的目标是让开发者能够通过JSON文件来定义和...

    fastjson+ajax+sppringmvc前后使用json传值的demo

    它使得开发者可以将业务逻辑、控制流程和视图分离开来,提高代码的可维护性和可测试性。在处理Ajax请求时,Spring MVC提供了Controller接口和@RequestMapping注解,使得我们可以方便地定义HTTP端点来接收和响应JSON...

    基于springmvc+mybatis+mysql和bootstrap的后勤报修系统源码+项目说明(前后分离).zip

    3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于springmvc+mybatis+mysql和bootstrap的后勤报修系统源码+项目说明(使用json前后分离)(毕业设计).zip 基于...

    JSON返回值格式的WebService样例

    在“DebrisPublicWeb”这个文件夹中,可能包含了实现上述功能的源代码,包括服务器端的处理程序、数据库连接逻辑以及可能的测试用例。分析这些文件可以帮助我们更深入地理解如何构建和使用这样的WebService接口。 ...

    mvc 列表json自动加载 查询 添加 编辑 详情 登录 注册

    2. 列表页JSON自动加载:这是分页和实时数据更新的技术,通常使用AJAX(Asynchronous JavaScript and XML)来实现。当用户滚动页面到底部时,通过JavaScript发送异步请求到服务器,获取更多的数据,然后动态地将这些...

Global site tag (gtag.js) - Google Analytics