Javaweb-AJAX快速入门及案例实战
AJAX概述
AJAX介紹
AJAX 是一種用于創建快速動態網頁的技術。
AJAX即"Asynchronous?Javascript?And?XML"（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
AJAX = 異步?JavaScript和XML（標準通用標記語言的子集）。
通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。
AJAX 的核心是 JavaScript 對象 XMLHttpRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術。簡而言之，XMLHttpRequest使您可以使用 JavaScript 向服務器提出請求并處理響應，而不阻塞用戶。
AJAX不是一種新的編程語言，而是一種用于創建更好更快以及交互性更強的Web應用程序的技術。
AJAX優點
使用Javascript向服務器提出請求并處理響應而不阻塞用戶！核心對象XMLHTTPRequest。通過這個對象，您的 JavaScript 可在不重載頁面的情況與Web服務器交換數據，即在不需要刷新頁面的情況下，就可以產生局部刷新的效果。
AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可使網頁從服務器請求少量的信息，而不是整個頁面。
AJAX 可使因特網應用程序更小、更快，更友好
?
AJAX工作原理
?
AJAX應用
AJAX快速入門
創建一個demo1.html
如何發送一個ajax請求?
第一步:獲取一個XMLHttpRequest對象
?
第二步:設置一個回調函數
回調函數它的作用就是用于處理服務器響應的數據
通過XMLHttpRequest對象的onreadystatechange設置回調函數
?
第三步設置請求方式GET/POST及請求的URL等
通過XMLHttpRequest對象的open方法
?
第四步真正向服務器發送請求
通過XMLHttpRequest對象的send方法
?
第五步在回調函數中獲取服務器響應的數據
通過XMLHttpRequest對象的responseText
?
XMLHttpRequest對象詳解
獲取XMLHttpRequest?對象
對于大部分瀏覽器可以直接通過 new XMLHttpRequest();
對于IE5 IE6 new ActiveXObject("Microsoft.XMLHTTP")
?
XMLHttpRequest常用屬性
?
responesText或responseXML來獲取
?
XMLHttpRequest常用方法
參數1：HTTP 請求方式 POST/GET。
參數2:url路徑
參數3:true/false 代表是否異步
?
如果請求方式是get，那么我們使用send(null) 原因:get請求方式是沒有http請求體
只有post請求方式時，才有請求體,所以send的參數只是在post請求時使用例如
Xmlhttp.send("username=xxx&password=xxx");
?
注意：如果請求方式是POST,那么我們在使用時，必須設置一個請求頭，就需要使用setRequestHeader方法來完成
?
AJAX案例
案例1-驗證用戶名是否可以使用
第一步:創建一個頁面demo2.html
?
第二步:完成瀏覽器向服務器發送ajax請求操作
?
?
第三步:完成服務器端操作
?
第四步:在瀏覽器端展示數據
?
案例2-省市二級聯動
第一步:創建demo3.html頁面
?
第二步:在服務器端創建一個工具類CityUtil它可以獲取省份與城市信息
創建ProvinceServlet
創建CityServlet
第三步:向服務器發送請求獲取省份信息填充到省份下拉框
第四步:選擇省份信息，向服務器發送請求獲取城市信息填充到城市下拉框
1.獲取省份名稱
2.向服務器發送請求，將省份名稱做為參數傳遞到服務器，服務器根據省份名稱查詢對應的城市信息
?
3.在瀏覽器端處理數據填充到城市下拉框中
注意:在向城市下拉框中添加信息前要先進行一次清空操作
總結
以上是生活随笔為你收集整理的Javaweb-AJAX快速入门及案例实战的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring 整合 aspectj
- 下一篇： Java 程序中使用 MongoDB教程