spring mvc番外篇(五):spring mvc结合ajax,json技术的应用

5.1简介

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

JSON(JavaScript ObjectNotation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。
JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

5.2 简单案例程序的开发

步骤一:在myeclipse8.6中新建web工程mvcAjaxJson，拷贝如下包到lib目下：



说明：commons-logging-1.1.3.jar是日志包，在下载的struts2官方包里面可以找到。其它的包都在spring3.2.2版本官方包里面找到。

     Fastjson-1.1.8.jar:阿里巴巴提供的json解析包。

spring-aop-3.2.2.RELEASE.jar：与Aop 编程相关的包

spring-beans-3.2.2.RELEASE.jar：提供了简捷操作bean 的接口

spring-context-3.2.2.RELEASE.jar：构建在beans 包基础上，用来处理资源文件及国际化。

spring-core-3.2.2.RELEASE.jar：spring 核心包

spring-web-3.2.2.RELEASE.jar：web 核心包，提供了web 层接口

spring-webmvc-3.2.2.RELEASE.jar：web 层的一个具体实现包，DispatcherServlet也位于此包中。

注意：以上包是springmvc开发所需要的最基本包，不能再精简。

 

步骤二:编写web.xml 配置文件，代码如下：

=================================web.xml========================

<?xml
version="1.0"encoding="UTF-8"?>
<web-app
version="2.5"
    xmlns="http://java.sun.com/xml/ns/javaee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  <!-- 配置spring的字符集过滤 -->
  <filter>
    <filter-name>encode</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
    <param-name>forceEncoding</param-name>
    <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encode</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
 
 
  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
 
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
================================================================

 

步骤三: 在web-inf目录下建立springmvc-servlet.xml的配置文件,它的命名规则{servlet-name}-servlet.xml ，注意下划线处。当DispatcherServlet启动的时候，它会默认根据此规则到web-inf目录下去找这个xml配置文件。

=========================springmvc-servlet.xml==========================

<?xml
version="1.0"encoding="UTF-8"
?>
<!DOCTYPE
beans PUBLIC
"-//SPRING//DTDBEAN//EN"
 "http://www.springframework.org/dtd/spring-beans.dtd">
<beans>   

    <bean
id="simpleUrlHandlerMapping" 
class="org.springframework
.web.servlet.handler.SimpleUrlHandlerMapping">
       <property
name="mappings">
           <props>
              <prop
key="/ajax.do">personControl</prop>
           </props>
       </property>
    </bean>
   
    <bean
id="jspViewResolver"
class="org.springframework
.web.servlet.view.InternalResourceViewResolver">
       <property
name="prefix"value="/"></property>
       <property
name="suffix"value=".jsp"></property>
    </bean>
    <bean
id="personControl"
class="com.wx.controler.PersonControler"></bean>
</beans>
==========================================================

步骤四:编写实体类Person.java，如下所示：

============================ Person.java===================

package cn.wx.bean;
 
public
class Person {
    private String
name;
    private Integer
age;
 
    public Person() {
    }
   
    public Person(String name, Integer age) {
       super();
       this.name = name;
       this.age = age;
    }
 
 
    public String getName() {
       return
name;
    }
 
    public
void setName(String name) {
       this.name = name;
    }
 
    public Integer getAge() {
       return
age;
    }
 
    public
void setAge(Integer age) {
       this.age = age;
    }
 
}
====================================================================

 

步骤五:编写控制器PersonControler.java，如下所示：

============================ PersonControler.java===================

package com.wx.controler;
 
import java.io.PrintWriter;
 
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;
import cn.wx.bean.Person;
import com.alibaba.fastjson.JSON;
 
public
class PersonControlerimplements Controller{
   
    public ModelAndView handleRequest(HttpServletRequest arg0,
           HttpServletResponse arg1) throws Exception {
       String name=arg0.getParameter("name");
       String age=arg0.getParameter("age");
       Person person=new Person(name,Integer.parseInt(age));
       PrintWriter out=arg1.getWriter();
       //把对象转换为json字符串
       String jsonString = JSON.toJSONString(person,true);
       System.out.println("===="+jsonString+"===");
       out.print(jsonString);
       out.flush();
       out.close();
       return
null;
    }
}
====================================================================

知识讲解：这里用到了阿里巴巴的json解析类JSON，例如【String jsonString = JSON.toJSONString(person,true);】这句能直接把实体类的对象解析成json字符串。JSON类的常用方法说明：

public static final Object parse(Stringtext); // 把JSON文本parse为JSONObject或者JSONArray

public static final JSONObjectparseObject(String text)； // 把JSON文本parse成JSONObject   

public static final  T parseObject(String text, Class clazz); // 把JSON文本parse为JavaBean

public static final JSONArrayparseArray(String text); // 把JSON文本parse成JSONArray

public static final  List parseArray(String text, Class clazz); //把JSON文本parse成JavaBean集合

public static final StringtoJSONString(Object object); // 将JavaBean序列化为JSON文本

public static final StringtoJSONString(Object object, boolean prettyFormat); // 将JavaBean序列化为带格式的JSON文本

public static final Object toJSON(ObjectjavaObject); 将JavaBean转换为JSONObject或者JSONArray。

 

步骤六:在webroot根目录下编写index.jsp,如下所示:

================================index.jsp==========================

<%@
page language="java"
import="java.util.*"pageEncoding="utf-8"%>
<%
String path =request.getContextPath();
String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE
HTML PUBLIC
"-//W3C//DTD HTML 4.01Transitional//EN">
<html>
  <head>
    <base
href="<%=basePath%>">
   
    <title>ajax,json</title>
    <meta
http-equiv="pragma"
content="no-cache">
    <meta
http-equiv="cache-control"content="no-cache">
    <meta
http-equiv="expires"content="0">   

    <script
type="text/javascript"src="js/jquery.min.js"></script>
       <script
type="text/javascript">
           $(document).ready(function(e){
              $("#click").click(function(e)
{
                  //发送ajax请求,返回的是json对象
                  $.ajax({
                     type:
"GET",
                     url:
"ajax.do",
                     data:
"name=zhangsan&age=20",
                     dataType:
"json",//如果返回json文本,这里用text
                     success:
function(msg)
{
                         alert(msg);
                        
                         //如果是返回的json文本,则需要用eval转换成json对象
                         //var stu=window.eval("("+msg+")");
                         //$("#show").append(stu.name+"<br/>");
                         //$("#show").append(stu.age+"<br/>");
                        
                         $("#show").append(msg.name+"<br/>");
                         $("#show").append(msg.age+"<br/>");
                     }
                  });
                  /*  发送ajax请求，返回的是json文本
                  $.getJSON("ajax.do","name=zhangsan&age=33",function(msg){
                     alert(msg);
                     $("#show").append(msg.name+"<br/>");
                     $("#show").append(msg.age+"<br/>");
                  });
                  */
              });
           });
          
       </script>
    </head>
    <body>
       <input
id="click"type="button"
value="click to showperson"
/>
       <p
id="show"></p>
    </body>
</html>

==================================================================

注意: 这里列出了两种返回json数据的方式，两种发送ajax请求的方式，请注意阅读。

 

步骤七: 启动tomcat，发布项目，在地址栏输入 http://localhost:8080/mvcAjaxJson进行测试。