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{@Overrideprotected 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里。

----------------------------------------

欢迎关注公众号“编程江湖”，可以领取Java、Python、微信小程序等诸多学习资料和项目源码，还能查看精品技术文章，并给大家提供了CSDN资源下载服务。