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裏。
----------------------------------------
歡迎關注公衆號“編程江湖”，可以領取Java、Python、微信小程序等諸多學習資料和項目源碼，還能查看精品技術文章，並給大家提供了CSDN資源下載服務。
