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

1、什么是Ajax？

AJAX = Asynchronous JavaScript and XML (异步的 JavaScript 和 XML)，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新局部网页的技术。

Ajax 不是一种新的编程语言，而是一种应用于创建更好更快以及交互性更强的Web应用程序的技术

Ajax的核心是XMLHttpRequest对象（xhr）。XHR为向服务器发送请求和解析服务器响应提供了接口，能够以异步方式从服务器获取新数据。

2、Ajax示例：

   		
   
		
    
请输入要加载的地址：
		
    
								
	
   
		
   
		
    
			加载位置：		
		
    	
   

• 访问结果

  

3、jQuery Ajax本质就是XMLHttpRequest，对它进行了封装，方便调用！

1、jQuery.get(...)	所有参数：       url: 待载入页面的URL地址      data: 待发送 Key/value参数   success: 载入成功时的回调函数  dataType: 返回内容格式, xml,json,script,text,html             2、jQuery.post(...)	所有参数：       url: 待载入页面的URL地址      data: 待发送 Key/value参数   success: 载入成功时的回调函数  dataType: 返回内容格式, xml,json,script,text,html3、jQuery.ajax(...)    部分参数：       url: 请求地址      type: 请求方式，GET,POST(1.9.0之后用method)   headers: 请求头       data: 要发送的数据contentType: 即将发送信息至服务器的内容编码类型     async: 是否异步    timout: 设置请求超时时间（毫秒）beforeSend: 发送请求前执行的函数（全局）  complete: 完成之后执行的回调函数（全局）   success: 成功之后执行的回调函数（全局）     error: 失败之后执行的回调函数（全局）   accepts: 通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型    dataType: 将服务器端返回的数据转换成指定类型              	 "xml": 将服务器端返回的内容转换成xml格式    "text": 将服务器端返回的内容转成普通文本格式    "html": 将服务器端返回的内容转成普通文本格式  "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转成普通文本格式    "json": 将服务器端返回的内容转换成相应的JavaScript对象

4、返回Json字符串实例：

• 4.1 返回List集合

  • 4.1.1 在 WebContent下新建一个ajax.jsp文件

    <%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%	String path = request.getContextPath();	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
           		
           
    		        
    			         
    				          
    姓名
    				          
    年龄
    			         
    		        
    		        
    		        
    	       

  • 4.1.2 新建一个 User实体类

    public class User {
           	private String username;	private Integer age;		public User() {
           		super();		// TODO Auto-generated constructor stub	}		public User(String username, Integer age) {
           		super();		this.username = username;		this.age = age;	}	public String getUsername() {
           		return username;	}	public void setUsername(String username) {
           		this.username = username;	}	public Integer getAge() {
           		return age;	}	public void setAge(Integer age) {
           		this.age = age;	}		@Override	public String toString() {
           		return "User [username=" + username + ", age=" + age + "]";	}}

  • 4.1.3 在 Controller包中新建一个 AjaxController类

    @Controllerpublic class AjaxController {
           		@GetMapping("/ajax")	@ResponseBody	public List
           
             toAjax() {
           				List
            
              list = new ArrayList
             
              ();				// 伪造用户数据		User user1 = new User("小明", 16);		User user2 = new User("小红", 17);		User user3 = new User("小李", 18);		// 将用户数据添加到list集合中		list.add(user1);		list.add(user2);		list.add(user3);				return list;	}}
             
            
           

    @ResponseBody的作用其实是将java对象转为json格式的数据

    注意：在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。

  ---

  • 4.1.4 访问结果

    

5、使用Ajax校验用户登录实例

• 5.1 在AjaxController类中添加 login()方法

  @PostMapping(value = "/login", produces = "text/html;charset=UTF-8")	@ResponseBody	public String login(String username, String password) {
       		String message = "";		if (username != null) {
       			if ("admin".equals(username)) {
       				message = "OK";			} else {
       				message = "用户名或密码有误！";			}		}		if (password != null) {
       			if ("123456".equals(password)) {
       				message = "OK";			} else {
       				message = "用户名或密码有误！";			}		}				return message;	}

• 5.2 新建一个login.jsp页面

  <%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%	String path = request.getContextPath();	String basePath = request.getScheme()+"://"        +request.getServerName()+":"+request.getServerPort()+path+"/";%>
       		
       
        		用户名：
        		
        用户名,4-20位字母或数字,非数字开头		
        
  		密码：
        		
        		
        
  		
        	
       

• 5.3 访问结果

  • 校验失败

    

  • 校验成功

    

总结：

• Ajax三部曲

  1. 编写对应处理的Controller，返回消息或者字符串或者json格式的数据；

  2. 编写ajax请求

     1. url: Controller请求

     2. data: 键值对

     3. success: 回调函数

  3. 给Ajax绑定事件，点击 .click，失去焦点onblur，键盘弹起 keyup，键盘按下 keydown

转载地址：http://ckiwi.baihongyu.com/