AJAX：Asynchronous JavaScript AND XML

定义：浏览器向服务器发送的异步请求（不改变页面的情况下，发送的变化）

核心：浏览器向服务器发送异步请求，javascript中提供xmlHttpRequest对象，这个是核心对象，来发送异步请求

最简写法： jQuery

书写ajax的步骤：
       1，创建对象： new xmlHttpRequest（）；
       2，初始化参数 open（"get/post","url","true"）
       3, 发送请求 send（data）
get/post

xmlHttpRequest存在不同的状态码
       0-----4
       0：创建(new)之后
       1：连接初始化之后 open之后
       2：发送请求之后
       3，服务器正在处理
       4，当服务器将结果响应到浏览器中

直接看例子

我们实现功能：注册账号时，检查账号在数据库中是否存在，并异步刷新出提示信息。（因为只是展示下Ajax，为了简便，直接在Servlet中写死账号为“aaa”，若注册账号为aaa，不能注册，其余情况可以注册）

一、最原始的写法：

jsp代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>注册账号（Ajax）</title>
	<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	账号(get)：<input type="text" name="username" id="username"/><span id="uinfo"> </span>
		<br/><br/>
		
	账号(post)：<input type="text" name="username" id="username1"/><span id="uinfo1"> </span>
		<br/><br/>
		
	<input type="button" value="同步提交" id="button" />	
		
	<script type="text/javascript">
	
		//同步提交
		$("#button").click(function(){
			window.location.href="ajax.do";
		
		});
			
		//get提交
		$("#username").blur(function(){
			//取到文本框里面的值（账号）
			var username = $("#username").val();
				
			//创建异步提交对象
			var xhr= new XMLHttpRequest();
			//初始化连接
			xhr.open("GET","ajax.do?username="+username,true);
			//发送请求
			xhr.send(null);
				
			//状态的改变事件
				
			xhr.onreadystatechange=function(){
				//处理响应结果
				if(xhr.readyState==4){
					//得到响应的结果
					var result = xhr.responseText;
					if (result=="0") {
						//找到id=uinfo---加内容进去
						$("#uinfo").html("该账号已经存在！")
						//找到id=uinfo---改掉字体的颜色
						$("#uinfo").css("color","red");
					} else{
						$("#uinfo").html("可以注册！")
						$("#uinfo").css("color","green");
					}
				}
			}
				
		});
			
			
		//post
		$("#username1").blur(function(){
			//取到文本框里面的值（账号）
			var username1=$("#username1").val();
				
			//创建异步提交对象
			var xhr= new XMLHttpRequest();
			//初始化连接
			xhr.open("post","ajax.do",true);
			//post提交，要添加请求头
			xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
			//发送请求
			xhr.send("username="+username1);
				
			//状态的改变事件	
			xhr.onreadystatechange=function(){
				//处理响应结果
				if(xhr.readyState==4){
					//得到响应的结果
					var result=	xhr.responseText;
					if (result=="0") {
						$("#uinfo1").html("该账号已经存在！")
						$("#uinfo1").css("color","red");
					} else{
						$("#uinfo1").html("可以注册！")
						$("#uinfo1").css("color","green");
					}
				}
			}
		});
		</script>
		
		
</body>
</html>

java代码：

package com.ajia.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajax.do")
public class AjaxServlet02  extends HttpServlet{

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String username=request.getParameter("username");

		//响应到页面中去
		PrintWriter out=response.getWriter();
		
		if ("aaa".equals(username)) {
			out.print(0);
		}else {
			out.print(1);
		}
		
		
	}

}

Servlet中，账号存在返回0，否则返回1。jsp中根据返回值进行异步刷新。

jsp中使用的是blur事件，即输入后，用鼠标点击一下该输入框外（输入框失去焦点），信息立即刷新出来。

若是同步提交，则会直接跳转到Servlet的地址；异步提交的话地址不会变。

结果如下：

同步提交：

异步提交：

二、最常用的写法

jsp代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>注册账号（Ajax）</title>
	<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	账号(get)：<input type="text" name="username" id="username"/><span id="uinfo"> </span>
		<br/><br/>
		
	账号(post)：<input type="text" name="username" id="username1"/><span id="uinfo1"> </span>
		<br/><br/>
		
	<script type="text/javascript">
		
		//get方式
		$("#username").blur(function(){
			//取到文本框里面的值（账号）
			var username = $("#username").val();
				
			$.ajax({
				  type: 'GET',
				  url: 'ajax.do?username='+username,
				  success: function(data){
					  if (data=="0") {
							//找到id=uinfo---加内容进去
							$("#uinfo").html("该账号已经存在！")
							//找到id=uinfo---改掉字体的颜色
							$("#uinfo").css("color","red");
						} else{
							$("#uinfo").html("可以注册！")
							$("#uinfo").css("color","green");
						}
				  },
				  error: function(msg){
					  alert("提交失败!");
				  }
			});
				
		});
		
		//post方式
		$("#username1").blur(function(){
			//取到文本框里面的值（账号）
			var username = $("#username1").val();
				
			$.ajax({
				  type: 'POST',
				  url: 'ajax.do',
				  data: {'username':username},
				  dataType:'json',
				  success: function(data){
					  if (data=="0") {
							//找到id=uinfo---加内容进去
							$("#uinfo1").html("该账号已经存在！")
							//找到id=uinfo---改掉字体的颜色
							$("#uinfo1").css("color","red");
						} else{
							$("#uinfo1").html("可以注册！")
							$("#uinfo1").css("color","green");
						}
				  },
				  error: function(msg){
					  alert("提交失败!");
				  }
			});
				
		});
			
			
		</script>
		
		
</body>
</html>

java代码不变，还是之前那个。

运行结果：

这样的写法是不是简洁了很多呢，也很直观易懂。

多说一点，json的写法：

{key:value，key:value} （需要打引号）

可以看到，Ajax方法内就使用的json写法，同时data后面也是用的json。

如果要用到json数组，直接在最外面加中括号[]

三、最简单的写法

jsp代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>注册账号（Ajax）</title>
	<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	账号(get)：<input type="text" name="username" id="username"/><span id="uinfo"> </span>
		<br/><br/>
		
	账号(post)：<input type="text" name="username" id="username1"/><span id="uinfo1"> </span>
		<br/><br/>
		
	<script type="text/javascript">
			
		//get提交
		$("#username").blur(function(){
			//取到文本框里面的值（账号）
			var username = $("#username").val();
			
			$.get("ajax.do?username="+username, function(data) {
				if (data=="0") {
					//找到id=uinfo---加内容进去
					$("#uinfo").html("该账号已经存在！")
					//找到id=uinfo---改掉字体的颜色
					$("#uinfo").css("color","red");
				} else{
					$("#uinfo").html("可以注册！")
					$("#uinfo").css("color","green");
				}
			});
		});
		
		//post提交
		$("#username1").blur(function(){
			//取到文本框里面的值（账号）
			var username = $("#username1").val();
			
			$.post("ajax.do",{'username':username}, function(data) {
				if (data=="0") {
					//找到id=uinfo---加内容进去
					$("#uinfo1").html("该账号已经存在！")
					//找到id=uinfo---改掉字体的颜色
					$("#uinfo1").css("color","red");
				} else{
					$("#uinfo1").html("可以注册！")
					$("#uinfo1").css("color","green");
				}
			});
		});

		</script>
		
		
</body>
</html>

运行结果：

第三种写法实际上就是用$post或者$get，然后直接写入内容。

比较：第二种写法是以键值对方式写入参数，第三种就是直接写参数，语法如下：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

总结：

最后总结一下，我们一般用第二种写法，看起来更直白易懂。

另外，后面两种要记得引入jQuery库哦

在jQuery里，如果不写type，默认均以get方式提交；dataType可以不用写，因为它默认执行智能判断（xml、json、script 或 html）。

还有，我们这里的Servlet写得比较简单，只是用PrintWriter的实例直接向前台输出，前台获取返回值进行处理。后续如果要从数据库读数据并进行处理的话，直接在Servlet中编写相应代码就行，前台需要进行一些处理的话也可以直接在回调函数success()中写入相应代码就行，整个Ajax的大体流程就是这样，非常简单，又十分好用。

注：jQuery提供的函数非常好用，但不要忘记Ajax的本源哦，它是使用xmlHttpRequest对象来发送请求的；

还有，后续可能会遇到跨域问题，jQuery中可以这样解决： dataType:"jsonp"

但是注意，解决跨域问题的是jsonp，不是Ajax，只是jQuery将其封装到了Ajax里。

Ajax的学习（最原始的写法+最常用的写法+最简便的写法）

一、最原始的写法：

二、最常用的写法

三、最简单的写法

总结：

猜你喜欢