當(dāng)前位置：首頁 > 编程语言 > java >内容正文

java

Java Web - Ajax技术

發(fā)布時間：2025/4/16 java 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 Java Web - Ajax技术小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一為什么會有Ajax技術(shù)的出現(xiàn)

想必大家肯定用過百度，當(dāng)我們在百度的搜索框中輸入文字的時候，下面就會自動出現(xiàn)你可能希望搜索的內(nèi)容，但是頁面中的其他內(nèi)容都沒有變化：

可以想象，這些內(nèi)容都是根據(jù)在輸入框中輸入的內(nèi)容動態(tài)變化的，而不是最開始就響應(yīng)到瀏覽器中的，否則互聯(lián)網(wǎng)中那么多內(nèi)容，這個響應(yīng)內(nèi)容得有多大。我們也可以F12打開瀏覽器的調(diào)試模式，可以看到當(dāng)你在輸入框中每輸入一個字符，就會有一個響應(yīng)。

你可以想象如果現(xiàn)在沒有Ajax技術(shù)，你會怎么做呢？我想，這也許是一個解決的辦法：

之后每次響應(yīng)的內(nèi)容都重新和第一次響應(yīng)的內(nèi)容拼接起來，再次響應(yīng)界面，從而刷新整個界面，但只有搜索框中的內(nèi)容改變，而其他內(nèi)容不變；但是這將導(dǎo)致一個問題，那就是重復(fù)的內(nèi)容總是一遍又一遍的發(fā)送，這真的有必要嗎？這也就是Ajax技術(shù)誕生的原因。

二什么是Ajax技術(shù)

這里引用了百度百科的內(nèi)容：
https://baike.baidu.com/item/ajax/8425?fr=aladdin

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
Ajax = 異步 JavaScript 和 XML 或者是 HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）。
Ajax 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
Ajax 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。

通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁頁面。Ajax 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），這樣就可使網(wǎng)頁從服務(wù)器請求少量的信息，而不是整個頁面。

使用 JavaScript 向服務(wù)器提出請求并處理響應(yīng)而不阻塞用戶核心對象XMLHttpRequest。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務(wù)器交換數(shù)據(jù)，即在不需要刷新頁面的情況下，就可以產(chǎn)生局部刷新的效果。

對于開發(fā)人員而言，知道以上這么多就可以了，相信有了上面的描述，你對Ajax技術(shù)已經(jīng)有的一定的認(rèn)識，下面我們將在實(shí)例中講解如何使用Ajax技術(shù)。

三 Ajax技術(shù)的使用

3.1 第一個Ajax程序

下面給出一個演示的例子：

mainPage.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %> <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!doctype html> <html lang="ch"><head><base href="<%=basePath%>"><title>mainPage</title><script type="text/javascript">function getDate() {//創(chuàng)建Ajax引擎對象var ajax;ajax = new XMLHttpRequest();//復(fù)寫onreadystatement函數(shù)ajax.onreadystatechange = function () {//獲取響應(yīng)內(nèi)容，響應(yīng)到方框內(nèi)var result = ajax.responseText;var showdiv = document.getElementById("showdiv");showdiv.innerHTML = result;}//發(fā)送請求ajax.open("get", "ajaxtest");ajax.send(null);}</script><style type="text/css">#showdiv{border: solid 1px;width: 200px;height: 100px;}</style></head><body><input type="button" value="test" onclick="getDate()"><div id="showdiv"></div></body> </html>

AjaxServlet.java

package com.chester.web.servlet;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.*; import java.io.IOException;@WebServlet("/ajaxtest") public class AjaxServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("text/html;charset=utf-8");resp.getWriter().write("good job!!");} }

啟動服務(wù)器，在瀏覽器中訪問mainPage.jsp文件，結(jié)果如下：

當(dāng)我們點(diǎn)擊test按鈕，結(jié)果如下：

我們主要關(guān)注mainPage.jsp文件中JS腳本中的內(nèi)容：

可以看到使用ajax的步驟如下

創(chuàng)建Ajax引擎對象
復(fù)寫onreadystatechange函數(shù)
發(fā)送請求

創(chuàng)建引擎對象很簡單，關(guān)于發(fā)送請求實(shí)際上和瀏覽器在地址欄發(fā)送是一個道理，這里open函數(shù)中寫的參數(shù)是請求方式和請求地址。請求方式為get所以send的內(nèi)容為null，如果請求方式為post，我們就需要在send中寫入請求內(nèi)容了（具體可以看下面的 五 Ajax的請求方式），下面著重講解onreadystatechange函數(shù)。

onreadystatechange函數(shù)，從字面意思理解的話就是當(dāng)readystate改變的時候；改變的時候，干什么呢？是執(zhí)行。它實(shí)際上在上面只是聲明重寫了一下，我們沒有直接調(diào)用這個函數(shù)，它是被調(diào)用的，聲明一般而言我們都寫的比較靠前，這也就是為什么函數(shù)的重寫在發(fā)送請求之前。

關(guān)于readyState，它實(shí)際上是Ajax的一個狀態(tài)，它有5個狀態(tài)，每次改變的時候onreadystatechange函數(shù)就執(zhí)行一次：

所以按下test按鈕的時候，onreadystatechange應(yīng)該執(zhí)行了四次，那么我們知道只有當(dāng)表示數(shù)據(jù)成功接收的時候我們才有執(zhí)行的必要（對這里的上下文而言是這樣的，你可以根據(jù)具體的情況做出改變，比如寫一些測試代碼），所以上面的JS腳本這樣寫更加合理：

那么請求是否每次都會成功呢？不成功的話，難道我們要這樣顯示嗎？

這顯然是不合理的，至少我們應(yīng)該給用戶一些提示，所以我們的JS腳本又改成這樣；

其中ajax.status存儲的是每次請求的狀態(tài)碼。

上面的內(nèi)容就構(gòu)成了一個基本的Ajax的應(yīng)用。

四 Ajax例子的代碼優(yōu)化

4.1 Ajax的同步與異步

我們應(yīng)該意識到這樣一個問題：當(dāng)發(fā)送請求后，我們是阻塞在send函數(shù)處，等待響應(yīng)的到來從而執(zhí)行onreadystatechange函數(shù)，還是執(zhí)行完send函數(shù)之后，直接執(zhí)行函數(shù)中接下來的內(nèi)容，當(dāng)響應(yīng)到來再執(zhí)行onreadystatechange函數(shù)；等待就是同步，直接執(zhí)行下面的內(nèi)容就是異步。

默認(rèn)我們是使用異步的方式，在我們的open函數(shù)中，有這樣一個參數(shù)選項(xiàng)，比如我們改成同步的方式：

ajax.open("get", "ajaxtest", false);

同步的方式在實(shí)際使用中還是比較少的。

4.2 未及時響應(yīng)時的處理

在上面的情況中，如果我們點(diǎn)擊test按鈕，而服務(wù)器未及時響應(yīng)（比如在AjaxServlet.java中寫Thread.sleep(3000)；），我們希望可以給用戶一些提示，而不是保持原有的空白框，這很簡單，我們只需要這樣修改js代碼：

在else選項(xiàng)中顯示waiting.gif圖片即可。

五 Ajax的請求方式

在使用Ajax技術(shù)的時候，我們要意識到ajax發(fā)送請求的時候，實(shí)際上請求還是瀏覽器發(fā)出的，只是瀏覽器知道這個請求是ajax發(fā)出的，當(dāng)響應(yīng)到來的時候，就不刷新整個界面了，而是響應(yīng)給ajax；ajax再做其他的操作。所以對服務(wù)器來說，是沒有ajax方式還是普通方式請求的區(qū)別的。

GET

前面的例子，我們只是使用了簡單的get方式，當(dāng)我們需要使用get來提交數(shù)據(jù)的時候，我們可以這樣寫

ajax.open("get", "ajaxtest?name=chester&pwd=123"); ajax.send(null);

作為一個練習(xí)，你可以想象一下，如果我們要做一個用戶注冊功能，ajax部分的代碼應(yīng)該如何寫。自然就是獲取用戶輸入，而后拼接到請求路徑中：

ajax.open("get", "ajaxtest?name=" + name + "&pwd=" + pwd);

其中name 和 pwd這樣得到:

var name = document.getElementById("uname").value; var pwd = document.getElementById("pwd").value;

POST

如果使用post方式提交數(shù)據(jù)，我們可以這樣寫

ajax.open("get", "ajaxtest"); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send(name=chester&pwd=123);

注意這里加了一句：

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

這句話的意思是，告訴服務(wù)器按照鍵值對的方式解析post方式send的數(shù)據(jù)，否則服務(wù)器會認(rèn)為只是普通的字符串提交。

六 Ajax的響應(yīng)數(shù)據(jù)格式

以上就是Ajax技術(shù)的主要內(nèi)容了，我們在來講講一個非常常見的問題，即數(shù)據(jù)交互問題，對于普通的簡單內(nèi)容，可能直接一個普通字符串就可以了，就像上面的例子一樣，但是對于類似表格這樣的很多數(shù)內(nèi)容應(yīng)該如何處理呢？

有一點(diǎn)是毋庸置疑的，那就是我們在服務(wù)器端必須要保證，響應(yīng)的格式要能被JS所解析，一種是普通字符串，另一種是JSON（重點(diǎn)）和XML；其實(shí)JSON也是一種字符串，但是用它來表示長長的數(shù)據(jù)（比如表格中的各項(xiàng)數(shù)據(jù)）比普通字符串要好得多，而且也很方便。

為了演示JSON的使用，我們編寫如下代碼：

mainPage.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %><!doctype html> <html lang="ch"><head><title>mainPage</title><script type="text/javascript">function getTableDate() {//獲取用戶請求信息var name = document.getElementById("uname").value;var pwd = document.getElementById("pwd").value;//創(chuàng)建Ajax引擎對象var ajax;ajax = new XMLHttpRequest();//復(fù)寫onreadystatement函數(shù)ajax.onreadystatechange = function(){//判斷ajax狀態(tài)if(ajax.readyState == 4){//判斷響應(yīng)狀態(tài)碼if(ajax.status == 200){//獲取響應(yīng)內(nèi)容var result = ajax.responseText;eval("var user=" + result);//獲取表格對象var ta = document.getElementById("ta");//插入新行var tr = ta.insertRow(1);//在新行插入數(shù)據(jù)var cell0 = tr.insertCell(0);cell0.innerHTML=user.uid;var cell1 = tr.insertCell(1);cell1.innerHTML=user.uname;var cell2 = tr.insertCell(2);cell2.innerHTML=user.pwd;}else if(ajax.status == 404){var showdiv = document.getElementById("showdiv");showdiv.innerText = "請求資源不存在"}else if(ajax.status == 500){var showdiv = document.getElementById("showdiv");showdiv.innerText = "服務(wù)器繁忙"}}}//發(fā)送請求ajax.open("get", "ajaxtest?name=" + name + "&pwd=" + pwd);ajax.send(null);}</script></head><body><hr>請輸入需要搜索的用戶名和密碼：<input type="text" name="uname" placeholder="Username" id="uname"/><input type="text" name="pwd" placeholder="Userpassword" id="pwd"/><input type="button" value="search" onclick="getTableDate()"><hr><table border="1px" id="ta"><tr><td>id</td><td>name</td><td>pwd</td></tr></table></body> </html>

AjaxServlet.java

package com.chester.web.servlet;import com.chester.web.pojo.User; import com.chester.web.service.LoginService; import com.chester.web.service.impl.LoginServiceImpl; import com.google.gson.Gson;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.*; import java.io.IOException;@WebServlet("/ajaxtest") public class AjaxServlet extends HttpServlet{@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("text/html;charset=utf-8");String name = req.getParameter("name");String pwd = req.getParameter("pwd");System.out.println("用戶提交信息為" + name + pwd);LoginService ls = new LoginServiceImpl();User u = ls.checkLoginService(name, pwd);if(u != null){System.out.println("查詢到的用戶信息" + u);resp.getWriter().write(new Gson().toJson(u));}} }

在代碼中，我們實(shí)現(xiàn)這樣一個功能，新建一個表格，提示用戶輸入用戶名和密碼，而后到后臺查詢信息，響應(yīng)到表格中，效果如下所示：

輸入用戶名和密碼，點(diǎn)擊search后，顯示如下：

這里主要講解如下幾個代碼段，其他的都比較容易理解：

1 瀏覽器端JSON結(jié)果的獲取

//獲取響應(yīng)內(nèi)容var result = ajax.responseText;eval("var user=" + result);

這里從服務(wù)器的響應(yīng)獲取JSON格式的數(shù)據(jù)，而后將其賦給user變量，eval()函數(shù)是JS的一個函數(shù)，它可以計(jì)算某個字符串，并執(zhí)行其中的的 JavaScript 代碼。為了知道result中的內(nèi)容我們在其中插入一句：

//獲取響應(yīng)內(nèi)容var result = ajax.responseText;alert(result);eval("var user=" + result);

再次查看響應(yīng)，可以看到瀏覽器的提示框中輸出如下信息：

這是JSON的字符串。我們在表格中并沒用全部顯示這些信息，而是選擇了一部分顯示。

2 服務(wù)器端JSON數(shù)據(jù)的創(chuàng)建

關(guān)于服務(wù)器端JSON數(shù)據(jù)的創(chuàng)建比較簡單，我們使用了Google公司開發(fā)的jar包gson，直接在servlet中調(diào)用，當(dāng)然你也可以自己拼接出這樣的字符串。

resp.getWriter().write(new Gson().toJson(u));

使用Gson()類的toJson()方法將User中的數(shù)據(jù)域轉(zhuǎn)化成為JSON數(shù)據(jù)，非常的方便，其中User對象是這樣的：

public class User {private int uid;private String uname;private String pwd;private int sex;private int age;private String birth;public int getUid() {return uid;}public void setUid(int uid) {this.uid = uid;}public String getUname() {return uname;}public void setUname(String uname) {this.uname = uname;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public int getSex() {return sex;}public void setSex(int sex) {this.sex = sex;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getBirth() {return birth;}public void setBirth(String birth) {this.birth = birth;}public String toString(){return getUname() + getPwd() + getBirth();} }

如果輸入的是List對象，轉(zhuǎn)化的結(jié)果就是一個數(shù)組，數(shù)組的每一項(xiàng)就是List對象中的每一項(xiàng)數(shù)據(jù)對應(yīng)的JSON數(shù)據(jù)，看起來類似于:

[{"uid":1,"uname":"Florence West","pwd":"123","sex":1,"age":18,"birth":"2000-10-10"}, {"uid":1,"uname":"Florence West","pwd":"123","sex":1,"age":18,"birth":"2000-10-10"}, {"uid":1,"uname":"Florence West","pwd":"123","sex":1,"age":18,"birth":"2000-10-10"}]

這樣一來，我們就成功的將java中的數(shù)據(jù)對象傳遞給了JS對象。

關(guān)于使用XML傳遞數(shù)據(jù)，和JSON實(shí)際上大同小異：

數(shù)據(jù)發(fā)送端(java servlet)：

//將響應(yīng)數(shù)據(jù)類型告訴瀏覽器為XML格式 resp.setContentType("text/xml;charset=utf-8"); //發(fā)送數(shù)據(jù)給瀏覽器 resp.getWriter().write("<user><uid>1</uid><uname>chester</uname></user>");

我們也可以使用jsp文件來實(shí)現(xiàn)這段代碼

數(shù)據(jù)接收端(js)：

//獲取 var result = ajax.responseXML; //使用 alert(result.getElementsByTagName("uname")[0].innerHTML)

可以看到XML比JSON要麻煩很多，而且，如果User對象改變，XML內(nèi)容也需要更改，而JSON不用。所以如果我們需要數(shù)據(jù)傳輸，盡量使用JSON，XML一般是用來做配置文件。

經(jīng)過上面的描述我們可以看到，如果在其他地方需要再次使用Ajax，有很多內(nèi)容是重復(fù)的，這也引導(dǎo)我們也許可以將Ajax封裝成一個JS函數(shù)，這個任務(wù)并不難，可以自己嘗試一下。

總結(jié)

以上是生活随笔為你收集整理的Java Web - Ajax技术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：操作系统-并发：死锁和饥饿
下一篇： Java Web - 服务器中的过滤器和