zoukankan      html  css  js  c++  java
  • 快速掌握Ajax-Ajax基础实例(Ajax返回Json在Java中的实现)

    (转)实例二:Ajax返回Json在Java中的实现

      

    转自http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html#2995114

    在这篇中主要是说一下使用Json来将后台取得的数据显示到前台页面。可以说这种方法应该是实现无刷新分页的基础,而且在开发过程中经常被用到。这里的后台部分由JAVA来实现。

      这个例子也在上一篇中那个项目中实现。新建一个SecondTest.html页面,定义一个按钮,并给这个按钮绑定事件ajaxJson()。在JS中实现AJAX,这里的AJAX相对于上一篇中的,我做了简单的封装,将原有的代码分成三个方法,分别是create()、callback()、run()。

      create方法是用来创建XMLHttp对象的,callback是用来实现回调函数的,run方法是核心方法。具体代码如下:

      create():

    复制代码
    function create(){                 if(window.XMLHttpRequest){                     xmlHttp=new XMLHttpRequest();                 }else if(window.ActiveXObject){                     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")                 }             }
    复制代码

      callback():

    复制代码
    function callback(){                 if(xmlHttp.readyState==4){                     if(xmlHttp.status==200){                         //要实现的操作                     }else{                         alert("AJAX服务器返回错误!");                     }                     }             }
    复制代码

      run():

    function run(url){                 create();                 xmlHttp.open("POST",url,true);                 xmlHttp.onreadystatechange=callback;                 xmlHttp.send();             }

      以上三个方法写好后,在ajaxJson()方法中直接调用run方法并将请求当参数传入进去。代码如下:

    function ajaxJson(){                 run("test.do?method=jsonTest&&msg="+new Date());             }

      在AjaxController类的中新建jsonTest方法,在JAVA中实现Json是需要Json架包的,Json的架包有:json-lib-2.3-jdk15.jar,ezmorph-1[1].0.6.jar,commons-logging-tests.jar,commons-logging-api-1.1.1.jar,commons-logging-adapters-1.1.1.jar,commons-logging-1.1.1-sources.jar,commons-logging-1.1.1-javadoc.jar,commons-logging-1.1.1.jar,commons-lang.jar,commons-collections-3[1].2.1.jar,commons-beanutils-core.jar,commons-beanutils-bean-collections.jar,commons-beanutils.jar。看着有点多哈,可以自己去CSDN上面找,我试着删掉一些,但发现少了会不好使,所以为了保险还是把这些都加进去吧。

      在开发过程中一般数据都是从数据库中取出来的,习惯性的我们会在程序中将取出的数据存到List中,而Json架包中正好有封装好的方法能将List转换为Json。在这个例子中我们自己制造一些假数据放到List中,然后再将List转换为Json,再返回给前台。代码如下:

    复制代码
    public ActionForward jsonTest(ActionMapping mapping, ActionForm form,             HttpServletRequest request, HttpServletResponse response)             throws Exception {         //制造假数据         ArrayList<UserModel> list=new ArrayList<UserModel>();         UserModel user1=new UserModel();//用户对象1         user1.setUserId(1);         user1.setUserName("哈哈");         user1.setUserSex("男");         list.add(user1);                  UserModel user2=new UserModel();//用户对象2         user2.setUserId(2);         user2.setUserName("呵呵");         user2.setUserSex("女");         list.add(user2);         //将List转化为JSON         JSONArray json=JSONArray.fromObject(list);         //设置编码         response.setCharacterEncoding("gbk");         //写入到前台         response.getWriter().write(json.toString());         return null;     }
    复制代码

      后台部分写完了,现在前台SecondTest.html页面需要接收后台反馈来的数据,这个时候就需要在回调函数中接收Json数据。JS代码如下:

    复制代码
    //回调函数         function callback(){             if(xmlHttp.readyState==4){                 if(xmlHttp.status==200){                     var xmlDoc=xmlHttp.responseText;                     var data=eval(xmlDoc);                     alert(data[0].userId+","+data[0].userName+","+data[0].userSex);                     alert(data[1].userId+","+data[1].userName+","+data[1].userSex);                 }else{                         alert("AJAX服务器返回错误!");                 }                 }         }
    复制代码

      以上就完成了Ajax返回Json在Java中的实现。

      
         

      

      这里将写下我程序员成长之路的点点滴滴!
  • 相关阅读:
    【微信小程序】数组操作
    iOS中html打开APP传参
    给radio加自己的样式(图片)
    TCP和IP的三次握手和第四次挥手
    什么是HTTP协议
    http和https的区别
    微信小程序-点击图片预览
    JAVASE
    thinkphp自学笔记
    前端必须掌握的30个CSS选择器
  • 原文地址:https://www.cnblogs.com/wangyt223/p/4119547.html
Copyright © 2011-2022 走看看