本文共 4661 字，大约阅读时间需要 15 分钟。

一、概念

Ajax是Web开发一个流行的词汇，全称Asynchronous JavaScript and XML,异步的JavaScript和XML。是几种技术的强强联合。

Ajax如何工作？

Ajax(既异步 JavaScript 和XML)是一种Web 应用程序开发的手段，它采用客户端脚本和Web服务器交换数据。

为什么要学习Ajax？

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使用Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

二、发送Ajax请求

XMLHttpRequest对象简介

XMLHttpRequest对象是整个Ajax开发的基础(它是一个js对象，不是java对象)

它为我们提供如下功能：

1.提供客户端和服务器异步通信的能力

2.能够向服务器发出请求

3.能够接受服务器的返回页面

为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象。如果支持，则创建HXLHttpRequest对象。如果不支持则创建ActiveXObject

创建：

// 创建xmlhttp对象var xmlhttp;if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari        xmlhttp = new XMLHttpRequest();} else { // code for IE6, IE5        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

发送请求：

示例：

                                   
   
                    
     
                              
菜名
                              
价格
                              
编号
                     
            
   
    

注意：AJAX的意义在于局部刷新，所以搜索框不能是表单+submit按钮了，而是文本框+button，然后在JS中直接获取DOM节点中值往服务器提交。

这里还涉及到很重要的一个知识点：onreadystatechange 事件 W3School解释很清楚：

这个方法会在一次请求中被触发5次，分别对应(0 -4)五个状态码。一次Ajax请求是否执行完成，就可以通过onreadystatechange事件来判断。

0：请求末初始化(没有调用send方法)

1：服务器连接已建立(socket已建立)

2：请求已接收(获取到了参数，服务器还没有执行action)

3：请求处理中(服务器在执行action方法，未执行完)

4：请求已完成，且相应已就绪(已经响应，并且能够获取到最终的数据)。

AJAX异步同步的区别？

异步：类似多线程一样，send方法执行完了之后，不会等待onreadystatechange结束。而是使用另外一条线程继续执行send下面的脚本，或者继续渲染页面。

同步：会等待onreadystatechange事件结束之后才继续往下执行或者渲染页面，期间页面会进入假死状态，当然，如果执行的速度很快，也感受不到假死。

注意：但是AJAX的精髓就在于局部刷新，异步请求。所以尽量使用异步模式(true)，防假死。尽量将获取数据后的逻辑处理(页面渲染等)放在回调函数中(xmlhttp.onreadystatechange=function()).

action方法：

/** * 1.原始的输出json方式 * 	OutputStream os; * 	os.write(通过第三方json-lib转换的json字符串.getByte()) */@RequestMapping(value="/queryFood",method=RequestMethod.GET)public String queryFood(String foodname,OutputStream os) throws Exception{	List

如果使用第三种直接返回对象需要配置消息转换器

     
     	
      		
       		
       			
        				
         					
        
         text/html
          					
        
         application/x-www-form-urlencoded
          				
         			
        		
       		
       		
       			
        				
         					
          					
        
         text/html
          					
          					
        
         application/x-www-form-urlencoded
          				
         			
        		
       	
      
   

service方法：

/**             * 根据菜品名模糊查询菜品信息，dao层返回List
   
    结构的结果集，             * 此方法负责将结果集转换成JSONString，返回给Controller层             * @param foodName             * @return             */   public String queryFoodsByName(String foodName){         List
    
      list = dao.queryFoodsByName(foodName);         JSONArray array = JSONArray.fromObject(list);         return array.toString();    }
    
   

现在绝大部分使用AJAX实现都是用JSON作为数据载体了，XML文件确定很明显：体积过于庞大。

dao层方法：

/**   * 根据菜品名模糊查询            * @param foodName            * @return            */   public List
   
     queryFoodsByName(String foodName){         String sql = "select foodid , foodname , price from food where foodname like '%" + foodName + "%'";         List
    
      list = template.query(sql, new Food());         return list;   }
    
   

所需依赖

   
   
     
    
     org.springframework
     
    
     spring-webmvc
     
    
     4.2.0.RELEASE
        
   
   
   	
    
     org.springframework
    	
    
     spring-jdbc
    	
    
     4.2.0.RELEASE
       
   
   
   	
    
     mysql
    	
    
     mysql-connector-java
    	
    
     5.1.26
    
   
   	
   	
    
     org.hibernate
    	
    
     hibernate-validator
    	
    
     4.3.2.Final
    
   
   
   	
    
     net.sf.json-lib
    	
    
     json-lib
    	
    
     2.4
    	
    
     jdk15
    
   
   
   	
    
     com.fasterxml.jackson.core
    	
    
     jackson-databind
    	
    
     2.8.9
    
   
   	
    
     org.codehaus.jackson
    	
    
     jackson-mapper-asl
    	
    
     1.9.13
    
   

运行结果( 点击搜索按钮后 )：

 至此，就用AJAX技术实现了搜索功能，无论怎么搜索，页面都不会全部刷新。