Ajax+JSP例子2(用json序例化返回数据)

在ajax中返回数据有两种方式:第一个用responsetext;另外一种是用responseXML的方式,由于XML解析效率低下和占用的流量的确大了很多,所以序列化JSON便受到广大web程序员的喜爱。后台可以复杂的数据结构(如数组,自定义类等)序列成字符串后回传给前台js,而前台javascript可以用很方便 的用eval函数,json2.js(可以到www.json.org下载)等轻松的完成解析,然后呈现出来。

后台我用的是java的Servlet来进行业务处理。

在eclipse新建好web工程后,首先创建一个jsp文件,添加一个按扭,和一个div。

<script type="text/javascript">
function getAjaxJson()
{   
  httpGet("myServlet", "GET", "msg=123"); 
}
</script>

</head>
<body>
<strong>AJAX JSON序列化示例</strong>
<hr>
<input type="button" value="GET操作" onclick="getAjaxJson()">
<hr>
<div id="showout"></div>
</body>

web.xml配置:

<url-pattern>中的字段myServlet是脚本文件的url.

httpGet("myServlet","GET","msg=123");

 <servlet-name>的字段是服务器端servlet类的类名。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>jsonexample</display-name>
 <servlet>
        <servlet-name>myServlet</servlet-name>
        <servlet-class>com.myServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>myServlet</servlet-name>
    <url-pattern>/myServlet</url-pattern>
</servlet-mapping>
</web-app>

 

完成以上任务以后,我们再来编写ajax发送http请求的脚本,新建一个脚本并引入到网页中,在head标签之间。

<script type="text/javascript" src="script/ajaxRequest.js"></script>
/*
 * 函数名:getTransport
 * 功能: 根据不同的浏览器对象创建 XMLHttpRequest对象并返回,如果浏览器不支持该对象,则返回undefined.
 */
 var xmlhttp=null;
 function getHttpRequest() 
 {
   try
   {
    xmlhttp=new ActiveXObject('Msxml2.XMLHTTP');
   }
   catch(e)
   {
        try
          {
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
          }
          catch(e1)
          {
              xmlhttp=new XMLHttpRequest();
          }
       
   }
 }
 

 
function httpGet(url,method,data)
{
 getHttpRequest();
 xmlhttp.open(method,url +"?"+data,true);
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlhttp.setRequestHeader("Content-Length",data.length);
 xmlhttp.onreadystatechange=callback;
 xmlhttp.send (null);
}

function callback()
{
     if(xmlhttp.readyState==4)
     {  
       if(xmlhttp.status==200)
       {
           //要实现的操作            
           var xmlDoc=xmlhttp.responseText;
           var data=eval(xmlDoc);
           document.getElementById("showout").innerHTML+=data[0].userId+","+data[0].userName+","+data[0].userSex+"<br>";
           document.getElementById("showout").innerHTML+=data[1].userId+","+data[1].userName+","+data[1].userSex+"<br>";
       }
       else
       {
           document.getElementById("showout").innerHTML="AJAX Server error!"; 
       }      
     }
}

 

这样前台的编码就完成了,然后添加后的处理代码,新建一个servlet类:

Json的架包有:json-lib-2.3-jdk15.jar,commons-beanutils-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.3.jar,ezmorph-1.0.6.jar,commons-logging.jar。可以到csdn:http://download.csdn.net/detail/tyfengyu/4478154下载后,buildpath进去。

package com;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import net.sf.json.*;
public class myServlet extends HttpServlet {
    private static final long serialVersionUID=1L;
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    {
        // TODO Auto-generated method stub
         //指定 去除客户端页面的缓存
         ClearCache(response);   
         //制造假数据  
        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  
        //设置编码   
        response.setCharacterEncoding("utf-8");
        //写入到前台   
        JSONArray json1=JSONArray.fromObject(list);
        response.getWriter().write(json1.toString());
        System.out.print(json1.toString());
        response.getWriter().flush();
        response.getWriter().close();
     }

     public void ClearCache(HttpServletResponse response)
     {
        //指定 去除客户端页面的缓存
        response.setHeader("pragma", "no-cache");
        response.setHeader("cache-control", "no-cache");
        response.setHeader("expires", "0"); 
     }
}

UserModel类:

必须显示声明缺省的构造函数,属性要用get 、set方法。

package com;

public class UserModel {

    /**
     * @param args
     */
    private int UserId;
    private String UserName;
    private String UserSex;
     
    public UserModel()
    {
     //super();    
    }

    /**
     * @return the userId
     */
    public int getUserId()
    {
        return UserId;
    }

    /**
     * @param userId the userId to set
     */
    public void setUserId(int userId)
    {
        UserId = userId;
    }

    /**
     * @return the userName
     */
    public String getUserName()
    {
        return UserName;
    }

    /**
     * @param userName the userName to set
     */
    public void setUserName(String userName) 
    {
        UserName = userName;
    }

    /**
     * @return the userSex
     */
    public String getUserSex() 
    {
        return UserSex;
    }

    /**
     * @param userSex the userSex to set
     */
    public void setUserSex(String userSex)
    {
        UserSex = userSex;
    }
    
}

这样就完成ajax+jsp用JSON进行数据传输的例子。

效果:

 参考:http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html

转载本文请标明出处。

posted @ 2012-12-20 20:50  方子格  阅读(3168)  评论(0编辑  收藏  举报