1.AJAX是什麼
傳統方式與伺服器互動的"弊端"：如果要重新整理網頁中的一部分，必須整個網頁重新加載！
Ajax：局部重新整理技術：通過js的方式請求背景，擷取資料，然後使用DOM技術根據背景擷取的資料更新頁面元素，在擷取資料的過程中，浏覽器不重新整理。
2.AJAX快速入門（驗證使用者名）
163郵箱的注冊頁面：輸入框離焦，發送ajax請求做背景查詢，然後使用DOM技術彈出一個提示資訊
ajax的典型應用：注冊的時候，在沒有送出表單的情況下，驗證使用者名是否存在
編寫步驟：
1.建立ajax的核心對象，ajax是以這個對象展開的
2.監聽伺服器的傳回狀态，當readyState（伺服器對請求處理的步驟）和status（響應的狀态碼）
3.發送請求
4.擷取響應
2.1.功能分析
步驟：
1.當輸入使用者名之後，輸入框失去焦點，發送ajax請求，擷取結果
2.根據結果使用DOM技術更新頁面節點
2.2.前端js代碼
<%@ page contentType="text/html; charset=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>Insert title here</title>
<script type="text/javascript">
function checkName(username) {
// 1、建立ajax的核心對象XMLHttpRequest
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");
}
// 2、監聽伺服器的傳回狀态
xmlhttp.onreadystatechange = function() {
// readyState=4:伺服器完成對請求的處理 status=200：響應狀态碼,成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 4、擷取來自伺服器的響應結果
var result = xmlhttp.responseText;
if ( result == 1 ) {
document.getElementById("result").innerHTML = "已存在X";
document.getElementById("result").style.color = "red";
} else {
document.getElementById("result").innerHTML = "可用√";
document.getElementById("result").style.color = "green";
}
}
}
// 3、發送請求
var url = "${pageContext.request.contextPath}/checkName?username=" + username;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</head>
<body>
<input id="username" onblur="checkName(value);" />
<span id="result">結果</span>
</body>
</html> 2.3.後端Servlet代碼
package web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("all")
@WebServlet("/checkName")
public class CheckName extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 擷取使用者名
String username = request.getParameter("username");
if ( "zhangsan".equals(username) ) {
response.getWriter().write("1");
} else {
response.getWriter().write("0");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
} 3.Ajax詳解
3.1.Ajax工作原理
ajax無重新整理技術，得益于浏覽器内置的核心對象XMLHttpRequest對象
1.建立核心對象（需要相容處理）
2.調用核心對象的方法發送請求
3.通過核心對象的responseText屬性擷取來自伺服器的結果
4.根據結果做相應的處理
3.2.AJAX的核心對象XMLHttpRequest
擷取核心對象，不同的浏覽器，擷取的方式不同，是以擷取該對象，需要判斷浏覽器的類型，然後使用相應的方式去擷取，一般是将相容代碼抽成一個函數，以後直接調用函數擷取該對象
每次發送ajax請求的時候，都需要建立一個全新的XMLHttpRequest對象
抽取單獨的js檔案：xhr.js
function getXHR() {
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");
}
return xmlhttp;
} 在需要使用ajax的頁面中，引入該js檔案，在擷取該對象的時候，直接調用getXHR()方法去擷取
3.3.AJAX的監聽函數onreadystatechange
不要手動寫！
是以，必須等核心對象的readyState屬性為4并且status屬性的值為200的時候，才能擷取到來自伺服器響應的結果，是以擷取結果的代碼，通常寫成如下形式：
監聽伺服器的傳回狀态
xmlhttp.onreadystatechange = function() {
// readyState=4:伺服器完成對請求的處理 status=200：響應狀态碼,成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//擷取來自伺服器的響應結果
var result = xmlhttp.responseText;
// do something...
}
} 3.4.發送AJAX請求
發送請求必須先調用open方法對象請求進行設定，然後再調用send方法才會發送請求！
3.5.擷取AJAX響應
擷取伺服器的響應有2個屬性：
responseText：擷取文本
responseXML：擷取伺服器響應的xml格式的資料，背景需要使用DOM4j将java對象轉換成xml格式的字元串，然後前端js還需要使用DOM技術去解析xml資料，和使用DOM操作HTML元素類似，相對來說比較麻煩，現在已經淘汰！
4.GET還是POST?
4.1.get和post的使用場景
get請求一般用于查詢(清單)資料，而post請求用于送出資料（增、删、改）
ajax中具體使用哪種請求方式，和傳統方式一緻！
4.2.GET請求和POST請求的差別
1.get請求的參數在位址欄中，是以相對post不安全，而post請求的參數在請求體中，相對get較安全
2.get請求發送的資料量有大小限制，而post理論上沒有大小限制。
3.get請求支援緩存，而post不支援緩存。（最重要的差別！）
當浏覽器發送一個get請求時，會将請求的資源加載本地的緩存中（硬碟中的某個位置），當再次請求該資源的時候，浏覽器會優先從本地緩存中擷取資料，如果緩存中沒有資料，則請求伺服器！這樣可以減輕伺服器的壓力！而發送一個post請求時，浏覽器根本就不會将請求的資源緩存到本地來，這是浏覽器給我們提供一種機制！
緩存是根據請求位址做判斷的，是以，如果請求的資源不希望從本地緩存中擷取，可以在請求的位址欄的後面追加随機數，以保證每次請求的位址不一樣，浏覽器從本地就找不到緩存資料，是以每次都會将請求發送給伺服器！
緩存：
前端緩存：css、js、圖檔等靜态資源
背景緩存：從資料庫中查詢的資料緩存
當發送get請求時，如果不希望伺服器傳回緩存的資料，可以在位址欄後随機拼接參數，是以走不走緩存，浏覽器和伺服器是根據請求的位址是否一緻來進行判斷的！
post請求需要在請求頭中添加Content-Type：
4.同步還是異步?
同步請求和異步請求的差別：
同步：單線程
請求發出之後，在伺服器沒有傳回結果之前，用戶端處理等待狀态，必須等伺服器響應結果之後，才能進行後續的操作。在伺服器處理請求的這個過程中，用戶端的js代碼是出于阻塞狀态。
異步：多線程
請求由另外一個線程來完成，完成之後處理響應的結果即可，用戶端可以進行其他的操作，js代碼也不會産生阻塞。
ajax異步請求：open(“get”, “xx”, true)
ajax同步請求：open(“get”, “xx”, false)