相關(guān)文章推薦：ajax視頻教程
1.1 什么是ajax:
ajax即“asynchronous javascript and xml”(異步javascript 和xml)，是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)。ajax=異步javascript和xml（標準通用標記語言的子集）。通過在后臺與服務器進行少量數(shù)據(jù)交換,ajax可以使用網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新（無刷新技術(shù)）。傳統(tǒng)的網(wǎng)頁（不使用ajax）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁頁面。
1.2ajax的應用場景：
1.2.1 檢查用戶名是否已被注冊：
很多站點的注冊頁面都具被自動檢測用戶名是否存在的友好提示，該功能整體頁面并沒有刷新，但仍然可以異步與服務器進行數(shù)據(jù)交換，查詢用戶輸入的用戶名是否存在數(shù)據(jù)庫。
1.2.2 省市級聯(lián)下拉框聯(lián)動：
很多站點都存在輸入用戶地址的操作，在完成地址輸入時，用戶所在的省份是下拉框，當選擇不同的省份時會出現(xiàn)不同市區(qū)的選擇，這就是最常見的省市聯(lián)動效果。
1.2.3 內(nèi)容自動補全：
不管時專注于搜索的百度，還是站點內(nèi)商品搜索的淘寶，都有搜索的功能，在i搜索框輸入查詢關(guān)鍵字時，整個頁面沒有刷新，但會根據(jù)關(guān)鍵字顯示相關(guān)查詢字條，這個過程是異步的。
百度的搜索補全功能：
淘寶的搜索補全功能：
1.3 同步方式與異步方式的區(qū)別：
同步方式發(fā)送請求：發(fā)送一個請求，需要等待響應返回，然后才能夠發(fā)送下一個請求，如果該請求沒有響應，不能發(fā)送下一個請求，客戶端會一直處于等待過程中。異步方式發(fā)送請求：發(fā)送一個請求，不需要等待響應返回，隨時可以再發(fā)送下一個請求，即不需要等待。
1.4 ajax的原理分析：
ajax引擎會在不刷新瀏覽器地址欄的情況下，發(fā)送異步請求：使用javascript獲取瀏覽器內(nèi)置的ajax引擎（xmlhttprequest對象）使用js確定請求路徑和請求參數(shù)ajax引擎對象根據(jù)請求路徑和請求參數(shù)進行發(fā)送請求服務器接收到ajax引擎的請求進行處理：服務器獲得請求參數(shù)數(shù)據(jù)服務器處理請求業(yè)務（調(diào)用業(yè)務層代碼）服務器響應數(shù)據(jù)給ajax引擎ajax引擎獲得服務器響應的數(shù)據(jù)，通過執(zhí)行javascript的回調(diào)函數(shù)將數(shù)據(jù)更新到瀏覽器頁面的具體位置：通過設置給ajax引擎的回調(diào)函數(shù)獲取服務器響應的數(shù)據(jù)使用javascript在指定的位置，顯示響應的數(shù)據(jù)，從而局部修改頁面的數(shù)據(jù)，達到局部刷新的目的。
2.1js原生的ajax：
js原生的ajax開發(fā)步驟：
創(chuàng)建ajax引擎對象
為ajax引擎對象綁定監(jiān)聽（監(jiān)聽服務器已將數(shù)據(jù)響應給引擎）
綁定提交地址
發(fā)送請求
監(jiān)聽里面處理響應數(shù)據(jù)
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>title</title> <style type="text/css"></style> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> //同步請求點擊事件 function sendrequest() { //js刷地址欄請求服務器端 location.href = "ajax1servlet?name=admin&password=123abc"; } //異步請求點擊事件 function sendasynrequest() { //1.創(chuàng)建ajax引擎對象 var xmlhttp = new xmlhttprequest(); //2.設置回調(diào)函數(shù)，目的是處理服務器完全返回的數(shù)據(jù) xmlhttp.onreadystatechange = function () { / * 這個回調(diào)函數(shù)什么調(diào)用呢？是ajax引擎對象與服務器通信狀態(tài)碼改變的時候調(diào)用 * ajax引擎對象與服務器通信狀態(tài)碼xmlhttp.readystate，范圍0~4 * 0：請求未初始化 * 1：服務器連接已建立 * 2：請求已接收 * 3：請求處理中 * 4：請求已完成，且響應已就緒 * 這個回調(diào)函數(shù)一共被調(diào)用4次，但只有狀態(tài)碼4的時候才代表服務器響應完成數(shù)據(jù)完成。 * ajax引擎通信轉(zhuǎn)態(tài)碼為4和http通信轉(zhuǎn)態(tài)碼為200 */ if(xmlhttp.readystate==4 && xmlhttp.status==200){ //獲取響應數(shù)據(jù) var content = xmlhttp.responsetext; alert(content); } } //3.設置請求路徑和請求參數(shù) / * xmlhttp.open(method,url) * method,請求方法，get或post請求 * url：請求路徑 */ xmlhttp.open("get","ajax1servlet?name=admin&psw=abc123"); //4.發(fā)送請求 xmlhttp.send(); } </script></head><body><input type="button" value="發(fā)送同步請求" onclick="sendrequest();"/><input type="button" value="發(fā)送異步請求" onclick="sendasynrequest();"/></body></html>package com.sunny.web;import javax.servlet.servletexception;import javax.servlet.annotation.webservlet;import javax.servlet.http.httpservlet;import javax.servlet.http.httpservletrequest;import javax.servlet.http.httpservletresponse;import java.io.ioexception;@webservlet(name = "ajax1servlet", urlpatterns = "/ajax1servlet")public class ajax1servlet extends httpservlet { protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { doget(request, response); } protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { //獲取請求參數(shù) string name = request.getparameter("name"); string password = request.getparameter("password"); //打印出來 system.out.println("