AJAX概述

AJAX介紹

AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。

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)記語言的子集）。

通過在后臺與服務(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 的核心是 JavaScript 對象 XMLHttpRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XMLHttpRequest使您可以使用 JavaScript 向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶。

AJAX不是一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。

AJAX優(yōu)點(diǎn)

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

AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），這樣就可使網(wǎng)頁從服務(wù)器請求少量的信息，而不是整個頁面。

AJAX 可使因特網(wǎng)應(yīng)用程序更小、更快，更友好

?

AJAX工作原理

?

AJAX應(yīng)用

AJAX快速入門

創(chuàng)建一個demo1.html

如何發(fā)送一個ajax請求?

第一步:獲取一個XMLHttpRequest對象

?

第二步:設(shè)置一個回調(diào)函數(shù)

回調(diào)函數(shù)它的作用就是用于處理服務(wù)器響應(yīng)的數(shù)據(jù)

通過XMLHttpRequest對象的onreadystatechange設(shè)置回調(diào)函數(shù)

?

第三步設(shè)置請求方式GET/POST及請求的URL等

通過XMLHttpRequest對象的open方法

?

第四步真正向服務(wù)器發(fā)送請求

通過XMLHttpRequest對象的send方法

?

第五步在回調(diào)函數(shù)中獲取服務(wù)器響應(yīng)的數(shù)據(jù)

通過XMLHttpRequest對象的responseText

?

XMLHttpRequest對象詳解

獲取XMLHttpRequest?對象

對于大部分瀏覽器可以直接通過 new XMLHttpRequest();

對于IE5 IE6 new ActiveXObject("Microsoft.XMLHTTP")

?

XMLHttpRequest常用屬性

onreadystatechange 它是用于綁定回調(diào)函數(shù)，當(dāng)服務(wù)器響應(yīng)數(shù)據(jù)回來后，我們可以在指定的回調(diào)函數(shù)中進(jìn)行數(shù)據(jù)處理。

readyState 它描述的http請求的狀態(tài)

status 它描述的http狀態(tài)碼 200 404 405 500…

?

獲取服務(wù)器響應(yīng)數(shù)據(jù)

responesText或responseXML來獲取

?

XMLHttpRequest常用方法

open它是用于設(shè)置請求方式，url及是否異步

參數(shù)1：HTTP 請求方式 POST/GET。

參數(shù)2:url路徑

參數(shù)3:true/false 代表是否異步

?

send它是真正向服務(wù)器發(fā)送請求

如果請求方式是get，那么我們使用send(null) 原因:get請求方式是沒有http請求體

只有post請求方式時，才有請求體,所以send的參數(shù)只是在post請求時使用例如

Xmlhttp.send("username=xxx&password=xxx");

?

setRequestHeader

注意：如果請求方式是POST,那么我們在使用時，必須設(shè)置一個請求頭，就需要使用setRequestHeader方法來完成

?

AJAX案例

案例1-驗(yàn)證用戶名是否可以使用

第一步:創(chuàng)建一個頁面demo2.html

?

第二步:完成瀏覽器向服務(wù)器發(fā)送ajax請求操作

得到文本框中錄入信息

?

使用ajax來完成向服務(wù)器發(fā)送請求操作

?

第三步:完成服務(wù)器端操作

?

第四步:在瀏覽器端展示數(shù)據(jù)

在瀏覽器展示

修改服務(wù)器端響應(yīng)數(shù)據(jù)

?

案例2-省市二級聯(lián)動

第一步:創(chuàng)建demo3.html頁面

?

第二步:在服務(wù)器端創(chuàng)建一個工具類CityUtil它可以獲取省份與城市信息

創(chuàng)建ProvinceServlet

創(chuàng)建CityServlet

第三步:向服務(wù)器發(fā)送請求獲取省份信息填充到省份下拉框

在demo3.html頁面上向服務(wù)器發(fā)送ajax請求

服務(wù)器響應(yīng)省份信息

在瀏覽器端處理服務(wù)器響應(yīng)的數(shù)據(jù)，顯示在省份下拉框

第四步:選擇省份信息，向服務(wù)器發(fā)送請求獲取城市信息填充到城市下拉框

1.獲取省份名稱

2.向服務(wù)器發(fā)送請求，將省份名稱做為參數(shù)傳遞到服務(wù)器，服務(wù)器根據(jù)省份名稱查詢對應(yīng)的城市信息

?

3.在瀏覽器端處理數(shù)據(jù)填充到城市下拉框中

注意:在向城市下拉框中添加信息前要先進(jìn)行一次清空操作

總結(jié)

以上是生活随笔為你收集整理的Javaweb-AJAX快速入门及案例实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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