20130428 sturts2对ajax的支持

基础内容：ajax基础

简单的ajax的测试，向服务器发送请求（post或者get）并获取所传送的参数。在文本框中显示。

1 :index.jsp页面：测试页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head> 

<title>My JSP 'index.jsp' starting page</title>

<script type="text/javascript">

//创建ajax对象 ------此部分是固定的写法兼容各种浏览器版本。

function ajaxFunction(){

var xmlHttp;

try{

    // Firefox, Opera 8.0+, Safari

     xmlHttp=new XMLHttpRequest();

    }catch (e){

   // Internet Explorer

    try{

       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

       }catch (e){

      try{

          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

          }catch (e){

          alert("您的浏览器不支持AJAX！");

          return false;

          }

      }

    }

   //onreadystatechange 属性存有处理服务器响应的函数。

    xmlHttp.onreadystatechange=function(){

   /*

    0 请求未初始化（在调用 open() 之前） 

1 请求已提出（调用 send() 之前） 

2 请求已发送（这里通常可以从响应得到内容头部） 

3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） 

4 请求已完成（可以访问服务器响应并使用它） 

*/

      alert("readyState:"+xmlHttp.readyState+"||responseText:"+xmlHttp.reponseText);

      if(xmlHttp.readyState==4){

      //可以通过 responseText 属性来取回由服务器返回的数据。

      //响应信息的内容可能有多种不同的形式，例如XML、纯文本、（X）HTML或JavaScript对象符号（JSON）

     /*

     我们可以根据所接收到的数据格式的不同用两种不同的方法来处理：

     1：使用responseText或者responseXML。

     responseText方法用于那些并非基于XML的格式。它把响应信息作为字符串，返回精确的内容。

     纯文本、（X）HTML和JSON都使用responseText。

     在纯文本或HTML上使用这个方法是很简单。

     2：处理JSON响应信息比处理纯文本或（X）HTML需要多一点技巧

    

     */

     alert("status:"+xmlHttp.status);

     if(xmlHttp.status == 200){

     //返回json格式

      alert("responseText:"+xmlHttp.responseText);

      alert("var obj="+xmlHttp.responseText);

                //没有调用eval()之前不能获取json对象，只有在eval()中处理了才能编程js所识别的json格式。

      alert("uname:"+xmlHttp.responseText.uname);

      eval("var obj="+xmlHttp.responseText);

         document.myForm.time.value=obj.uname;

                //返回xml格式

         }

        }

      }

      //open参数说明

      /*

      1.发送信息的方式(post,get)

  2.发送的目标( url)

  3.发送的布尔变量 true代表异步，为false代表同步

                 *如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通                    常需要一个 onreadystatechange 事件句柄。

          4 ,5 username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

      */

     //send() 方法可将请求送往服务器。GET

    // xmlHttp.open("GET","servlet/AjaxServlet?uname=123&pwd=456",true);

    //xmlHttp.send(null);

    //send()POST 需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单,表单包含中文信息需要编码<切记>

    xmlHttp.open("POST","servlet/AjaxServlet",true);

    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");

    xmlHttp.send("uname=123&pwd=456");

 }

 //json测试

 function showJSON() {   

    var user = {   

        "username":"andy",   

        "age":20,   

        "info": {"tel":"123456","cellphone":"98765"},   

        "address":   

             [   

                 {"city":"beijing","postcode":"222333"},   

                 {"city":"newyork","postcode":"555666"}   

             ]   

     }   

       

     alert(user.username);   

     alert(user.age);   

     alert(user.info.cellphone);   

     alert(user.address[0].city);   

     alert(user.address[0].postcode);   

}

</script>

 </head>

  

  <body>

   <button onclick="showJSON();">测试json</button>

    <form name="myForm">

用户: <input type="text" name="username" onkeyup="ajaxFunction();"/>

时间: <input type="text" name="time" />

</form>

</body>

</html>

2:AjaxServlet服务器端servlet代码：

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

    /*  List list = new ArrayList();     

 list.add( "first" );     

 list.add( "second" );     

 list.add( "three" );     

 JSONArray jsonArray2 = JSONArray.fromObject( list );     

 System.out.println( jsonArray2 );*/  

/*

  Map map = new HashMap();     

  map.put( "name", "json" );     

  map.put( "bool", Boolean.TRUE );    

  map.put( "int", new Integer(1) );     

  map.put( "arr", new String[]{"a","b"} );     

  map.put( "func", "function(i){ return this.arr[i]; }" );     

  JSONObject json = JSONObject.fromObject( map );   

  out.write(json.toString());

  */

//uname="+uname+"&pwd="+pwd",true);

System.out.println(request.getParameter("uname")+"||"+request.getParameter("pwd"));

Map map = new HashMap();     

map.put( "uname", request.getParameter("uname"));     

map.put( "pwd", request.getParameter("pwd") );    

JSONObject json = JSONObject.fromObject( map );   

out.write(json.toString());

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

this.doGet(request, response);

}

3：web.xml中配置：

 <servlet>

    <servlet-name>AjaxServlet</servlet-name>

    <servlet-class>AjaxServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>AjaxServlet</servlet-name>

    <url-pattern>/servlet/AjaxServlet</url-pattern>

  </servlet-mapping>

4：jar（由于用到了json封装java，有关json的）：

说明：

org.apache.commons(3.2以上版本)
org.apache.oro
net.sf.ezmorph(ezmorph-1.0.4.jar)
nu.xom

JSON-lib

/////////////////////////////////////////////////////////////////////////////////////

sturts2 中ajax的简单的例子（利用ajax的json插件进行开发相当的方便）