这是我自己写的例子，希望对大家有帮助

使用了struts2，jdk1.6

1.实体类书写

public class Student {

       private String toid ;

       private String name ;

       private String sex ;

       public String getToid() {

             return toid ;

      }

       public void setToid(String toid) {

             this.toid = toid;

      }

       public String getName() {

             return name ;

      }

       public void setName(String name) {

             this.name = name;

      }

       public String getSex() {

             return sex ;

      }

       public void setSex(String sex) {

             this.sex = sex;

      }

}

2.我们在首页的jsp中写上几个链接

<html>

  <head >

    <title >ajax-struts测试</title >

  </head >

 

  <body >

    <a href="<%= path%>/login.jsp" >使用javascript原生 api实现ajax ---读取远程文本</a >

    <br />

    <a href="<%= path%>/register.jsp" >使用javascript原生 api实现ajax ---检查注册名是否重复</a >

    <br />

    <a href="<%= path%>/jqueryRegister.jsp" >使用jquery框架实现 ajax---检查注册名是否重复 </a>

    <br />

    <a href="<%= path%>/jqueryJson.jsp" >ajax请求json数据，动态构造网页 </a>

  </body >

</html>

3.struts2的配置文件

<?xml version="1.0" encoding= "UTF-8" ?>

<!DOCTYPE struts PUBLIC

       "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"

       "http://struts.apache.org/dtds/struts-2.3.dtd" >

       <struts>

         <package name="user" extends="struts-default" namespace="/user" >

           <action name="userAction" class="action.UserAction">

            <result name="doLogin" >/login.jsp</ result>

            <result name="loginerr" >/register.jsp</ result>

           </action>

        </package>

       </struts>

4.实现javascript原生Ajax读取文本文档

<html>

  <head >

    <title >ajax读取txt文本</title >

    <script type="text/javascript">

     function getContent(){

         var xmlhttpRequest=new XMLHttpRequest();

           xmlhttpRequest.onreadystatechange= function(){

           if (xmlhttpRequest.readyState==4 && xmlhttpRequest.status==200){

             document.getElementById("content" ).value=xmlhttpRequest.responseText;

           }

          }

          xmlhttpRequest.open( "GET","<%= path%>/txt/ajaxtest.txt ",true);

          xmlhttpRequest.send();

     }

    </script >

  </head >

 

  <body >

      <input type="button" value="ajax获取信息" onclick="getContent()" />

      <br />

      <textarea id="content" rows="5" cols="30"></ textarea>

  </body >

</html>

文本信息为:

hello ajax

你好啊


自己随便写一个文本文档，注意路径不要写错了

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

（1）.无法使用缓存文件（更新服务器上的文件或数据库）

（2）.向服务器发送大量数据（POST 没有数据量限制）

（3）.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

5.javascript原生Ajax实现账号验证

< html>

  <head >

     <title > 注册</ title >

     <script type= "text/javascript">

     function doRegister(){

        var xmlhttpRequest= new XMLHttpRequest();

            xmlhttpRequest.onreadystatechange= function (){

            if (xmlhttpRequest.readyState==4 && xmlhttpRequest.status==200){

             var responseResult=xmlhttpRequest.responseText;

             if (responseResult=='iserror' ){

               alert( "账号已被使用" );

             } else {

               alert(responseResult);

               var registerForm=document.getElementById( "registerForm");

               registerForm.submit();

             }

            }

         }

          var username=document.getElementById("username" ).value;

          xmlhttpRequest.open("GET" ," <%=path %> /user/userAction!checkUsername.action?username= "+username,true);

          xmlhttpRequest.send();

     }

     </script >

  </head >

 

  <body >

    ${requestScope.errormsg}

    <form id= "registerForm" action =" <%= path%> /user/userAction!doLogin.action" method= "post">

      用户名: < input type ="text" name= "username" id= "username" />

      <br />

      密码: < input type ="password" name= "password" id= "password" />

      <br />

       < input type ="button" onclick= "doRegister()" value ="注册" />

    </form >

  </body >

</ html>

新建一个UserAction代码内容为：

public class UserAction {

     public String doLogin() {

             return "doLogin" ;

      }

}

这个类放在这，我们还要添加方法，留待后面使用

6.使用jQuery框架实现Ajax，检验账号

< html>

  <head >

   <title > jqury实现无刷新测试 </ title>

   <script type= "text/javascript" src =" <%= path%> /js/jquery-1.7.1.js" ></script >

   <script type= "text/javascript">

     function doRegister(){

       var username=$("#username" ).val();

        $.ajax({

            type: "POST" ,  //异步请求方式

            data:{ "username" :username},  //传递的数据

            url:' <%= path%> /user/userAction!checkUsername.action ',  //请求路径

            dataType: "text" ,

            success: function (data){

               alert(data);

            },

            error: function (err){alert("错误：" +err);}  //异步请求失败后的回调函数

      });

     }

     </script >

  </head >

 

  <body >

    <form id= "registerForm" action =" <%= path%> /user/userAction!doLogin.action" method= "post">

      用户名: < input type ="text" name= "username" id= "username" />

      <br />

      密码: < input type ="password" name= "password" id= "password" />

      <br />

       < input type ="button" onclick= "doRegister()" value ="注册" />

    </form >

  </body >

</ html>

在上面的UserAction类里面添加代码如下：

public void checkUsername() {

            HttpServletRequest request = ServletActionContext.getRequest();

            HttpServletResponse response = ServletActionContext.getResponse();

            String username = request.getParameter( "username" );

             if (username.equals("admin" )) {

                   try {

                        Writer writer = response.getWriter();

                        writer.write( "iserror" );

                        writer.flush();

                        writer.close();

                  } catch (IOException e) {

                        e.printStackTrace();

                  }

            }

      }

7.Ajax请求json数据，动态构造网页

< html>

  <head >

    <title > jquery ajax 请求json数据动态构造网页 </ title>

    <script type= "text/javascript" src =" <%= path%> /js/jquery-1.7.1.js" ></script >

    <script type= "text/javascript">

     function searchStudent(){

        $.ajax({

            type: "POST" ,  //异步请求方式

            url:' <%= path%> /user/userAction!ajaxList.action ',  //请求路径

            dataType: "json" ,

            success: function (data){

               //alert(data);

               $( "#stuTr" ).nextAll().remove();

               //循环json数据

               for (var i=0;i<data.length;i++){

                 var item=data[i];

                 //alert(item.toid+" : "+item.name);

                 $("#stuTable" ).append( "<tr><td>"+item.toid+ "</td><td>" +item.name+"</td><td>" +item.sex+ "</td></tr>");

               }

            },

            error: function (err){alert("错误：" +err);}  //异步请求失败后的回调函数

      });

     }

    </script >

  </head >

 

  <body >

    <input type= "button" onclick ="searchStudent()" value = "ajax得到所有学生" />

    <table id= "stuTable" border ="1" >

     <tr id= "stuTr" >< td> toid </td >< td> 学生姓名 </td >< td> 性别 </td ></ tr>

     

    </table >

  </body >

</ html>

在上面的UserAction类里面添加代码如下：

/**

       * 给客户端返回 json数据

       */

       public void ajaxList() throws Exception {

             //模拟从数据库中获取数据

            List<Student> list = new ArrayList<Student>();

             for (int i = 0; i < 10; i++) {

                  Student student = new Student();

                  student.setToid(i + "" );

                  student.setName( "ago" + i);

                  student.setSex(i % 2 + "" );

                  list.add(student);

            }

            HttpServletResponse response = ServletActionContext.getResponse();

             //把list解析成 json

            String json = JSON. toJSONString(list);

            System. out .println(json);

            response.setContentType( "application/json;charset=UTF-8" );

            response.setHeader( "Cache-Control" , "no-cache" );

             //给用户打印 json数据

            response.getWriter().write(json);

            response.flushBuffer();

      }