站長資訊網(wǎng)
相關(guān)文章推薦：ajax視頻教程
1.1 什么是ajax:
- Ajax即“Asynchronous Javascript And XML”(異步JavaScript 和XML)，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。Ajax=異步JavaScript和XML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax可以使用網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新（無刷新技術(shù)）。傳統(tǒng)的網(wǎng)頁（不使用Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁頁面。
1.2Ajax的應(yīng)用場景：
1.2.1 檢查用戶名是否已被注冊：
很多站點(diǎn)的注冊頁面都具被自動(dòng)檢測用戶名是否存在的友好提示，該功能整體頁面并沒有刷新，但仍然可以異步與服務(wù)器進(jìn)行數(shù)據(jù)交換，查詢用戶輸入的用戶名是否存在數(shù)據(jù)庫。
1.2.2 省市級(jí)聯(lián)下拉框聯(lián)動(dòng)：
很多站點(diǎn)都存在輸入用戶地址的操作，在完成地址輸入時(shí)，用戶所在的省份是下拉框，當(dāng)選擇不同的省份時(shí)會(huì)出現(xiàn)不同市區(qū)的選擇，這就是最常見的省市聯(lián)動(dòng)效果。
1.2.3 內(nèi)容自動(dòng)補(bǔ)全：
不管時(shí)專注于搜索的百度，還是站點(diǎn)內(nèi)商品搜索的淘寶，都有搜索的功能，在i搜索框輸入查詢關(guān)鍵字時(shí)，整個(gè)頁面沒有刷新，但會(huì)根據(jù)關(guān)鍵字顯示相關(guān)查詢字條，這個(gè)過程是異步的。
百度的搜索補(bǔ)全功能：
淘寶的搜索補(bǔ)全功能：
1.3 同步方式與異步方式的區(qū)別：
- 同步方式發(fā)送請求：發(fā)送一個(gè)請求，需要等待響應(yīng)返回，然后才能夠發(fā)送下一個(gè)請求，如果該請求沒有響應(yīng)，不能發(fā)送下一個(gè)請求，客戶端會(huì)一直處于等待過程中。
- 異步方式發(fā)送請求：發(fā)送一個(gè)請求，不需要等待響應(yīng)返回，隨時(shí)可以再發(fā)送下一個(gè)請求，即不需要等待。
1.4 Ajax的原理分析：
- AJAX引擎會(huì)在不刷新瀏覽器地址欄的情況下，發(fā)送異步請求：
- 使用JavaScript獲取瀏覽器內(nèi)置的AJAX引擎（XMLHttpRequest對象）
- 使用js確定請求路徑和請求參數(shù)
- AJAX引擎對象根據(jù)請求路徑和請求參數(shù)進(jìn)行發(fā)送請求
- 服務(wù)器接收到Ajax引擎的請求進(jìn)行處理：
- 服務(wù)器獲得請求參數(shù)數(shù)據(jù)
- 服務(wù)器處理請求業(yè)務(wù)（調(diào)用業(yè)務(wù)層代碼）
- 服務(wù)器響應(yīng)數(shù)據(jù)給Ajax引擎
- Ajax引擎獲得服務(wù)器響應(yīng)的數(shù)據(jù)，通過執(zhí)行JavaScript的回調(diào)函數(shù)將數(shù)據(jù)更新到瀏覽器頁面的具體位置：
- 通過設(shè)置給Ajax引擎的回調(diào)函數(shù)獲取服務(wù)器響應(yīng)的數(shù)據(jù)
- 使用JavaScript在指定的位置，顯示響應(yīng)的數(shù)據(jù)，從而局部修改頁面的數(shù)據(jù)，達(dá)到局部刷新的目的。
2.1js原生的Ajax：
- js原生的Ajax開發(fā)步驟：
創(chuàng)建Ajax引擎對象
為Ajax引擎對象綁定監(jiān)聽（監(jiān)聽服務(wù)器已將數(shù)據(jù)響應(yīng)給引擎）
綁定提交地址
發(fā)送請求
監(jiān)聽里面處理響應(yīng)數(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"> //同步請求點(diǎn)擊事件 function sendRequest() { //js刷地址欄請求服務(wù)器端 location.href = "Ajax1Servlet?name=admin&password=123abc"; } //異步請求點(diǎn)擊事件 function sendAsynRequest() { //1.創(chuàng)建ajax引擎對象 var xmlHttp = new XMLHttpRequest(); //2.設(shè)置回調(diào)函數(shù)，目的是處理服務(wù)器完全返回的數(shù)據(jù) xmlHttp.onreadystatechange = function () { /** * 這個(gè)回調(diào)函數(shù)什么調(diào)用呢？是ajax引擎對象與服務(wù)器通信狀態(tài)碼改變的時(shí)候調(diào)用 * ajax引擎對象與服務(wù)器通信狀態(tài)碼xmlHttp.readystate，范圍0~4 * 0：請求未初始化 * 1：服務(wù)器連接已建立 * 2：請求已接收 * 3：請求處理中 * 4：請求已完成，且響應(yīng)已就緒 * 這個(gè)回調(diào)函數(shù)一共被調(diào)用4次，但只有狀態(tài)碼4的時(shí)候才代表服務(wù)器響應(yīng)完成數(shù)據(jù)完成。 * ajax引擎通信轉(zhuǎn)態(tài)碼為4和http通信轉(zhuǎn)態(tài)碼為200 */ if(xmlHttp.readyState==4 && xmlHttp.status==200){ //獲取響應(yīng)數(shù)據(jù) var content = xmlHttp.responseText; alert(content); } } //3.設(shè)置請求路徑和請求參數(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("name="+name); System.out.println("password="+password); //輸出數(shù)據(jù)前端 response.getWriter().write("hello js ajax"); } }
2.2 Ajax引擎連接狀態(tài)readyState值0~4變化過程：
- 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
- 0: 請求未初始化
- 1: 服務(wù)器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應(yīng)已就緒
這里狀態(tài)值4只能說明接收到了服務(wù)器的響應(yīng)服務(wù)器處理ajax請求結(jié)束，但是不能代表正確的獲取了服務(wù)器的響應(yīng)，需要配合http狀態(tài)碼200兩個(gè)條件就可以說明正確的獲取了服務(wù)器響應(yīng)。只有這兩個(gè)條件滿足，xmlhttp.responseText才可以獲取到正確的響應(yīng)數(shù)據(jù)。
xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ if(xmlhttp.status == 200){ alert("響應(yīng)數(shù)據(jù)" + xmlhttp.responseText); } } };
相關(guān)學(xué)習(xí)推薦：javascript學(xué)習(xí)教程
