如今B/S结构的系统使用Ajax技术是再平常只是的了。今天我们就来探讨下在JSPGenSDF第四版中:怎样使用Ajax技术、怎样输出XML文件及JSON格式数据输出。

怎样搭建一个最基础的JSPGenSDF项目,请參考:http://blog.csdn.net/jspgen/article/details/30825879 

技术交流QQ群:12349848

一、基础介绍

Ajax:一种创建交互式应用的网页开发技术,在不又一次载入整个页面的情况下,能够与server交换数据并更新部分网页内容。
XML:一种扩展性标识语言。属文件格式。在互联网应用中经常使用于多类型数据文件传输。

JSON:一种轻量级的数据交换格式,纯文本型。

作为传输数据方面,JSON比XML更具优势:
1、XML文件庞大, 格式复杂, 传输占用带宽;JSON数据格式比較简单, 易于读写,占用带宽小。

2、XML文件服务端和client都须要花费大量代码来解析XML,异常复杂、不easy维护;JSON服务端和client均易于解析这样的数据格式。

JSPGenSDF第四版对Ajax有非常好的支持,服务端均可直接输出XML文件及JSON数据格式,项目使用中我们能够依据业务情况任选一种传输数据格式。

代码实现方面。我们看以下详细的样例。

二、測试代码

A、AjaxAction.java

Ajax动作:

  1. package jspgen.action;
  2. import grapes.Dates;
  3. import grapes.Files;
  4. import grapes.Grapes;
  5. import java.io.File;
  6. import java.net.MalformedURLException;
  7. import java.net.URL;
  8. import java.util.ArrayList;
  9. import java.util.List;
  10. import java.util.Map;
  11. /**
  12. * Action类:Ajax 演示
  13. *
  14. * @author JSPGen
  15. * @copyright (c) JSPGen.com
  16. * @created 2014年06月
  17. * @email jspgen@163.com
  18. * @address www.jspgen.com
  19. */
  20. public class AjaxAction extends Action {
  21. /**
  22. * 默认方法
  23. */
  24. @Override
  25. public String execute() {
  26. String type = getParameter("type");
  27. if(type != null && "json".equals(type)) {
  28. // JSON输出
  29. /*
  30. // 第一种方式
  31. Map<String, Object> map = new HashMap<String, Object>();
  32. map.put("name", getParameter("name"));
  33. map.put("name", getParameter("description"));
  34. return json(true, map);
  35. */
  36. // 另外一种方式
  37. String message = "来自服务端," + getParameter("name") + " " + getParameter("description");
  38. return json(true, message);
  39. } else {
  40. // 拼装xml字符串
  41. String xmlStr = "<?xml version=\"1.0\" encoding=\"UTF-8\"?
  42. >"
  43. +"<root>"
  44. +" <name>"+getParameter("name")+"</name>"
  45. +" <description>"+getParameter("description")+"</description>"
  46. +"</root>";
  47. return xml(xmlStr);
  48. }
  49. }
  50. }

注意:JSPGenSDF第四版中对JSON数据输出进行了调整。JSON输出包括的必备属性有:status、message、store。分别相应于:操作状态、操作消息(含错误信息)、数据集合(一般用于对象属性输出)。效果图例如以下:

B、testAjax.html

Ajax调用页面:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test Ajax</title>
  6. </head>
  7. <body>
  8. <h2>Ajax Test</h2>
  9. <a href="javascript:void(0);" onclick="testAjax();">读取JSON数据</a>
  10. <a href="/jspgensdf/ajax.gen?type=xml&name=JSPGener&description=Hello!" target="_blank">输出XML文件</a><br /><br />
  11. <script type="text/javascript" src="/jspgensdf/static/js/jquery.js"></script>
  12. <script type="text/javascript">
  13. function testAjax(){
  14. $.ajax({
  15. type: 'POST',
  16. url: '/jspgensdf/ajax.gen?type=json',
  17. data: {name:'JSPGener', description:'好嚣张!'},
  18. dataType: 'json',
  19. // 请求成功后触发
  20. success: function (result) {
  21. // {'status':'false', 'message':'message'}
  22. if (result.status == true) {
  23. alert('成功信息:'+result.message);
  24. }else{
  25. alert('错误信息:'+result.message);
  26. }
  27. },
  28. // 请求失败遇到异常触发
  29. error: function (xhr, status, error) {
  30. alert(status);
  31. }
  32. });
  33. }
  34. </script>
  35. </body>
  36. </html>

三、測试

浏览器中直接输入:http://localhost:8080/jspgensdf/ajaxTest.html

便可进入測试页面,分别点击:读取JSON数据、输出XML文件链接,会出现例如以下效果图,弹窗说明ajax请求已经成功,后端接收并进行处理的数据已经传到了前端页面。

 

 

 

 

跟阿根一起学Java Web开发二:使用Ajax技术及XML与JSON实现输出的更多相关文章

  1. 跟阿根一起学Java Web开发一:开发环境搭建及JSPGen基础配置

    JSPGenSDF软件开发框架(于2014年5月5号公布4.0版).简称JSPGen,专用Java Web方面平台式软件开发,整个框架也能够说是前台与后台的一个粘合剂,如今对JSPGenSDF进行开发 ...

  2. java web 开发三剑客 -------电子书

    Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知In ...

  3. java web开发必备知识

    从各种招聘网站的要求上筛选出了一些java开发的一些基本的要求,对照自身看看有哪些缺陷. java基础 既然是java web开发,java SE肯定要学好了. 多线程,IO,集合等,对队列,缓存,消 ...

  4. 《Java web 开发实战经典》读书笔记

    去年年末,也就是大四上学期快要结束的时候,当时保研的事情确定了下来,终于有了一些空闲的时间可以学点实用的技术. 之前做数据库课程设计的时候,也接触过java web的知识,当时做了一个卖二手书籍的网站 ...

  5. Java Web开发中路径问题小结

     Java Web开发中,路径问题是个挺麻烦的问题,本文小结了几个常见的路径问题,希望能对各位读者有所帮助. (1) Web开发中路径的几个基本概念 假设在浏览器中访问了如下的页面,如图1所示: 图1 ...

  6. Java Web 开发中路径相关问题小结

    Java Web开发中路径问题小结 (1) Web开发中路径的几个基本概念 假设在浏览器中访问了如下的页面,如图1所示: 图1 Eclipse中目录结构如图2所示: 图2 那么针对这个站点的几个基本概 ...

  7. 《Java Web开发实战》——Java工程师必备干货教材

    一年一度毕业季,又到了简历.offer漫天飞,失望与希望并存的时节.在IT行业,高校毕业生求职时,面临的第一道门槛就是技能与经验的考验,但学校往往更注重学生的理论知识,忽略了对学生实践能力的培养,因而 ...

  8. Java Web开发技术教程入门-静态网页技术

        昨天了解了构建动态网站的几种技术:Servlet技术.JSP技术,ASP技术和ASP.NET技术以及PHP技术.昨天的精髓在于JSP技术的运行原理:通过用户请求JSP文件,首先检查JSP文件的 ...

  9. 五分钟学Java:如何才能学好Java Web里这么多的技术

    原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 系列文章介绍 本文是<五分钟学Java>系列文章的一篇 本系列文章主要围绕Java程序员必须掌握的核心技能,结合我个人三年 ...

随机推荐

  1. 搞了一宿,弄完了一个POP3协议

    POP3协议和SMTP协议都会了,加上PE文件的读写,APIHOOK,以及远程进程注入,我是不是就可以写个简单点的通过邮件传播的蠕虫病毒了,哈哈哈哈哈哈. 感觉POP3协议挺简单的,比那个该死的SMT ...

  2. 怎么对C++枚举(不是类)里面的东西进行随机

    把枚举里面的东西取到一个数组如: enum 枚举类型 a[]={ 枚举元素 }; 变成了一个数组,然后把随机结果当成枚举数组的索引,就可以得到随机的枚举元素了.

  3. HTML5定位功能,实现在百度地图上定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 2018-11-26-win10-uwp-获取窗口的坐标和宽度高度

    title author date CreateTime categories win10 uwp 获取窗口的坐标和宽度高度 lindexi 2018-11-26 15:4:0 +0800 2018- ...

  5. Luogu P1850 换教室(期望dp)

    P1850 换教室 题意 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有\(2n\)节课程安排在\(n\)个时间段上.在第\(i(1\l ...

  6. DataSourceUtils(使用C3P0连接池的工具类)

    一.导入jar包(c3p0-0.9.1.2.jar) 2.添加配置文件(放在src下) 配置文件的名称:c3p0.properties 或者 c3p0-config.xml 放在src之下 c3p0. ...

  7. VS 快捷键和正则替换

    本文在VS2017中可用 1.注释 :Ctrl  K C 取消注释: Ctrl K U 2.整理代码格式: Ctrl K D 或者 Ctrl K F 3.快速切换不同的代码窗口  Ctrl+Tab 4 ...

  8. C#icon图标文件转Image

    Icon icon = ICONHelper.GetFileIcon(filePath); MemoryStream mStream = new MemoryStream();//创建内存流 icon ...

  9. Spring相关技术记录

    @ResponseStatus(value=) Hibernate OneToOne: 使用optional=false,才能使用lazy 如果关联字段是当前表的主键,我试了不加optional=fa ...

  10. 解决底部Button遮挡ListView最后一项内容的bug

    项目中ListView和Button经常是一起使用的,用ListView来展示数据,用Button来提交修改的数据或对修改的数据进行确定操作. 假如使用线性布局的话ListView会盖住整个Butto ...