【基于SSH框架的个人博客系统05】ajax异步通讯技术与json交互

注意：本项目为博主初学Web开发时所写，所使用的方法都比较笨，不符合主流开发方法。例如，包管理应该使用Maven进行管理而不是手动导入，对前端后端代码的架构也并不是很清晰。大家学习思想即可，可以不用浪费时间在将这个项目跑起来。目前主流的技术应当是Spring+SpringMVC+Mybatis的SSM框架，配合Shiro做权限控制，Redis做缓存，也可以学习SpringBoot开发微服务。由于本博主已经保研，较少接触开发，故此项目也不再进行维护。

粗略讲了一下后端之后，我们来看看前端，前端主流框架有Bootstrap和JQuery，所谓的框架，其实就是对一大堆底层东西的封装，使我们可以更加方便地使用。Bootstrap框架，封装了大量的设计精美的class，有html和css基础的人完全可以很快掌握到。而JQuery则是对javaScript的封装。这两个框架便利了开发者，加快了我们开发的效率。

Bootstrap有专门的中文开发文档http://v3.bootcss.com/css/，也有可视化布局系统供我们使用http://www.ibootstrap.cn/#，在开发的时候，对着文档写即可。

而JQuery极大地简化了JavaScript 编程，通过JQuery选择器，来取得html中对应的结点进行处理，又或者是动态增加或者删除网页内容。配合CSS，也可以创建出很华丽的动画效果。

 

 

Ajax异步通讯技术

在平时浏览网页的过程中，我们可能会发现有这些现象：注册账号的时候，填写完一个账号直接你该账号已经被注册。又或者你点击一个导航，页面的一部分直接就变化了，而没有感觉到整个页面都刷新。这些其实都是ajax异步通讯技术的功能。它可以动态更改页面的内容，而不用刷新整个页面。

我们来看使用ajax更新页面的一个例子，方便我们更好地理解。

 

 

 

这是一个简单的ajax请求，我们使用JQuery提供给我们的$.ajax（）来使用ajax异步通讯，它帮我们封装好了对不同浏览器的不同处理，使我们可以专心于请求的编写。让我们来看看ajax的参数

首先是type指定我们请求的方式，可以是post，get。

dataType可有可无，但如果指定了dataType，而对应的处理方法却没有返回对应的数据的话，该请求会失败。一般使用“json”与后台进行交互。Json数据是类似'{"a": "Hello", "b": "World"}'这样的字符串，是一种轻量级的数据交换格式。

url指定我们请求的链接，由于我在struts配置文件中配置了

<actionname="userinfo_*" class="UserInfoAction"method="{1}">

所有指向userinfo_*的链接都会转到这个action进行处理。*是通配符，可以是任意值。由于我们传入的url为userinfo_getUserInfo，那这里的*便是getUserInfo，method=“{1}”指定了方法为第一个通配符的值，也就是说，这个URL会转入UserInfoAction中的getUserInfo方法进行处理。

success:function(data){成功获得数据后的代码}:当该请求成功返回时会执行函数里面的代码，形参中的data是我们获得的json数据。

 

 

Struts与json的结合

至于如何在struts中返回json数据，在struts2中其实已经有很好的支持，我们只需要导入相应的jar包，在struts中，让package继承json-default。

然后将action改为如下形式，当返回的字符串为“jsonMap”时，自动将name=”root”的param指定的成员封装为json数据发送。

对应的getUserInfo代码如下：

 

public String getUserInfo(){
              HttpServletRequestrequest = ServletActionContext.getRequest();
              HttpSessionsession = request.getSession();
              jsonMap= new HashMap<String, Object>(); 
              IntegeruserId=null;
              StringstringUserId=request.getParameter("userId");
              if(stringUserId=="null"||stringUserId==null){//不是访客
                     userId=(Integer)session.getAttribute("userId");
              }else{//是访客
                     userId=Integer.parseInt(stringUserId);
              }
              UserInfouserInfo=userInfoService.getUserInfoByUserId(userId);
              if(stringUserId=="null"||stringUserId==null){
                     //是访客的话增加一个PV
                     userInfo.setUserRecentLoginTime(newDate());
                     userInfoService.update(userInfo);
              }else{//是本人的话更新最近登录时间
                     userInfo.setUserPV(userInfo.getUserPV()+1);
                     userInfoService.update(userInfo);
              }
              Stringprovince=null;
              Stringcity=null;
              Stringarea=null;
              if(userInfo.getUserPlace()!=null){
                     Placeplace=placeService.get(userInfo.getUserPlace());
                     province=place.getProvince();
                     city=place.getCity();
                     area=place.getArea();
              }
              StringImageURL=userInfo.getUserImage();
              System.out.println(ImageURL);
              jsonMap.put("userInfo",userInfo);
              jsonMap.put("province",province);
              jsonMap.put("city",city);
              jsonMap.put("area",area);
              jsonMap.put("ImageURL",ImageURL);
              return"jsonMap";
       }

 

 

 

 

jsonMap.put("userInfo",userInfo);

jsonMap.put("province", province);

jsonMap.put("city", city);

jsonMap.put("area", area);

jsonMap.put("ImageURL",ImageURL);

这些是我在后台放到map中的一些键值对，返回数据的时候会自动封装为json数据，传给前端中的data。前端获取到json数据后，就可以将data中的数据拿出来，利用jquery进行相应的赋值操作，达到异步更改页面的效果。

使用chrome浏览器的话，可以在开发者工具中的network查看返回的json数据

 

 

 

 

----------------------------------------------------------------------------

本项目下载地址：

github：https://github.com/SCAUMankind/SSHBlogSystem