关于Ajax的概念不再做解释了，我想通过三个小例子来让大家对Ajax有个清晰的认识。要学习它，必须从最基础最原始的方式开始认识，然后通过使用框架来提升效率，逐步认识它。

一.原生js版(注册的用户名是否重复的校验)

前端js代码：

 后台servlet查找用户表

public class CheckUserServlet extends HttpServlet {     public void doPost(HttpServletRequest request, HttpServletResponseresponse)           throws ServletException, IOException {       response.setCharacterEncoding("UTF-8");       String username = request.getParameter("username");       PrintWriter out = response.getWriter();       try {           Class.forName("com.mysql.jdbc.Driver");           Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/wp","root","root");           PreparedStatement ps = con.prepareStatement("select * from user where u_name='"+username+"'");           ResultSet rs = ps.executeQuery();           if(rs.next()){              out.println("true");           }else{              out.println("false");           }           con.close();           out.close();       } catch (ClassNotFoundException e) {           e.printStackTrace();       } catch (SQLException e) {           e.printStackTrace();       }    }}

二．JQuery框架版(一个搜索框的自动补全)

前端js代码(使用了jQuery框架,封装了对Ajax的操作,是不是简单了许多)

    
     $(document).ready(function() {    $('#query').keyup(function() {            reg=/^[a-z|A-Z|0-9]/;//以字母或者数字开头的不予响应           if(reg.test($('#query').val()))return;                    $.ajax({             url: 'AutoServlet?body='+$('#query')[0].value,             type: 'GET',             dataType: 'json',  //以json形式返回            timeout: 2000,             cache: false,             error: erryFunction,  //错误执行方法               success: succFunction //成功执行方法           })         function erryFunction() {             alert("error");         }         function succFunction(data) {                $.each(data, function (index, value) {  //遍历                      $("#auto").append("
     
"+value);                });        }     }); }); 
    

 

后台可以使用Servlet处理，将得到的结果使用Gson转换为json形式返回给客户端：

public class AutoServlet extendsHttpServlet {       public void doGet(HttpServletRequest request, HttpServletResponse response)                     throwsServletException, IOException {              List
    
      names = new ArrayList
     
      ();              String body = request.getParameter("body");              body = new String(body.getBytes("ISO-8859-1"),"UTF-8");              response.setCharacterEncoding("UTF-8");              PrintWriterout = response.getWriter();              try{                     Class.forName("com.mysql.jdbc.Driver");                     Connection con =DriverManager.getConnection("jdbc:mysql://localhost:3306/wp","root","root");                     PreparedStatement ps = con.prepareStatement("select distinct (name) from book where namelike '%"+body+"%'");                     ResultSet rs = ps.executeQuery();                     while(rs.next()){                            names.add(rs.getString("name"));                     }                     con.close();              }catch (ClassNotFoundException e) {                     e.printStackTrace();              }catch (SQLException e) {                     e.printStackTrace();              }        //使用谷歌的gson转换成json              Gson gson = new Gson();              String jsonString = gson.toJson(names);              out.println(jsonString);              out.close();       }}
     
    

 

三．快捷式DWR版(省市二级联动)

前端js和html代码

          湖北省湖南省山东省

服务器端Java代码：

public class Demo1 {    List
    
      citys1 = new ArrayList
     
      ();    List
      
        citys2 = new ArrayList
       
        ();    List
        
          citys3 = new ArrayList
         
          (); Map
          
           
            > cityMap = new HashMap
            
             >(); public Demo1(){ citys1.add(new City(100,"武汉市")); citys1.add(new City(101,"宜昌市")); citys1.add(new City(102,"仙桃市")); citys1.add(new City(103,"黄冈市")); citys2.add(new City(200,"长沙市")); citys2.add(new City(201,"株洲市")); citys2.add(new City(202,"岳阳市")); citys2.add(new City(203,"湘潭市")); citys3.add(new City(300,"烟台市")); citys3.add(new City(301,"青岛市")); citys3.add(new City(302,"秦皇岛市")); cityMap.put(1,citys1); cityMap.put(2,citys2); cityMap.put(3,citys3); } public List
             
               findCity(int id ){ if(cityMap.containsKey(id)){ returncityMap.get(id); } return null; }}
             
            
           
          
         
        
       
      
     
    

后台的代码就是如此，servlet不需要了，返回的结果也不需要转换了，看起来就像在客户端直接调用服务器端java代码一样.

 

但是多了些配置和引用：

1.      web.xml的配置

2.      dwr.xml的配置

3.      自动生成的js脚本的引用(需要先注入)

 

 

    我们会发现，所谓的框架，不过是封装了一些繁杂无味的机械化操作，将这些平时会重复使用的部分写好，把变化的部分提炼出来，以配置的形式让人修改，达到的效果是相同的，但开发的效率却大大提高。就像所有的Ajax框架和组件一样，底层的操作少不了，你不需要做，但你得知道有这么一出，这就是基本原理。