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

粗略讲了一下后端之后，我们来看看前端，前端主流框架有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