Java?Web中Ajax技術(shù)使用方法介紹
前言
Ajax是一個(gè)客戶(hù)端技術(shù) 是更加先進(jìn) 標(biāo)準(zhǔn)化和高效的Web開(kāi)發(fā)技術(shù)
提示:以下是本篇文章正文內(nèi)容,下面案例可供參考
一、Ajax與傳統(tǒng)的Web應(yīng)用模式的對(duì)比
在傳統(tǒng)的Web應(yīng)用中 頁(yè)面中用于的每一次操作都將觸發(fā)一次返回Web服務(wù)器的HTTP請(qǐng)求 服務(wù)器將進(jìn)行相應(yīng)的處理然后返回一個(gè)HTML頁(yè)面給客戶(hù)端
而在Ajax應(yīng)用中 頁(yè)面中用戶(hù)的操作將通過(guò)Ajax引擎與服務(wù)器端進(jìn)行通信 然后將返回結(jié)果提交給客戶(hù)端頁(yè)面的Ajax引擎 再由Ajax引擎來(lái)決定將這些數(shù)據(jù)插入到頁(yè)面的指定位置
所以在Ajax開(kāi)發(fā)模式中可以通過(guò)JavaScript實(shí)現(xiàn)在不刷新整個(gè)頁(yè)面的情況下 對(duì)部分?jǐn)?shù)據(jù)進(jìn)行更新 從而降低了網(wǎng)絡(luò)流浪 給用戶(hù)帶來(lái)更好的體驗(yàn)
二、Ajax使用的技術(shù)
Ajax是XMLHttpRequest對(duì)象和JavaScript XML CSS DOM等多種技術(shù)的組合 其中只有XMLHttpRequest對(duì)象是新技術(shù) 其他的均為已有技術(shù)
1:XMLHttpRequest對(duì)象
是核心技術(shù) 它是一個(gè)具有應(yīng)用程序接口的JavaScript對(duì)象 能夠使用超文本傳輸協(xié)議連接一個(gè)服務(wù)器 是微軟公司為了滿(mǎn)足開(kāi)發(fā)者的需要推出的
2:XML
它是可擴(kuò)展的標(biāo)記語(yǔ)言的縮寫(xiě),它提供了用于描述結(jié)構(gòu)化數(shù)據(jù)的格式 適用于不同應(yīng)用程序間的數(shù)據(jù)交換 而且這種交換不以預(yù)先定義的一組數(shù)據(jù)結(jié)構(gòu)為前提 增強(qiáng)了可擴(kuò)展性 XMLHttpRequest對(duì)象與服務(wù)器交換的數(shù)據(jù)通常采用XML格式
在XML文檔中 元素以樹(shù)形分層結(jié)構(gòu)排列 其實(shí)<resume>為根元素 其他的都是該元素的子元素
3:JavaScript
它是一種在Web頁(yè)面中添加動(dòng)態(tài)腳本代碼的解釋性程序語(yǔ)言 具體介紹可以參考
4:CSS 樣式表
5:DOM 文檔對(duì)象模型
三、XMLHttpRequest對(duì)象的具體使用
1、初始化XMLHttpRequest對(duì)象
IE瀏覽器初始化如下
var http_request=new ActiveXObject("Msxml2.XMLHTTP");
或者
var http_request=new ActiveObject("Microsoft.XMLHTTP");
非IE瀏覽器
var http_request=new XMLHttpRequest();
兩種情況的實(shí)例化代碼如下
if(window.XMLHttpRequest){ http_request=new XMLHttpRequest(); } else if(window.ActiveObject){ try{ http_request=new ActiveXObject("Msxml2.XMLHTTP"); } cathc(e){ try{ http_request=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){} } }
2、XMLHttpRequest對(duì)象常用方法
open()方法 用于設(shè)置進(jìn)行異步請(qǐng)求目標(biāo)的URL 請(qǐng)求方法以及其他參數(shù)信息
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])
send()方法 用于向服務(wù)器發(fā)送請(qǐng)求 如果請(qǐng)求聲明為異步 該方法將立即返回 否則要等到接受到響應(yīng)為止
send(content)
setRquestHeader()方法用于為請(qǐng)求的HTTP頭設(shè)置值
setRequestHeader("header","value")
3、XMLHttpRequest常用屬性
onreadystatechange屬性用于指定狀態(tài)改變時(shí)所觸發(fā)的事件處理器 在Ajax中 每個(gè)狀態(tài)改變都會(huì)觸發(fā)一個(gè)事件處理器 通常會(huì)調(diào)用一個(gè)JavaScript函數(shù)
http_request.onreadystatechange=getResult;
readystate屬性用于獲取請(qǐng)求的狀態(tài) 包括五個(gè)屬性值 0代表未初始化 1代表正在加載 2代表已加載 3代表交互中 4代表完成
status屬性用于返回服務(wù)器的HTTP狀態(tài)碼 200表示請(qǐng)求成功 202表示請(qǐng)求被接受 400表示錯(cuò)誤的請(qǐng)求 404表示文件未找到 500表示內(nèi)部服務(wù)器錯(cuò)誤
四、與服務(wù)器通信-發(fā)送請(qǐng)求與處理響應(yīng)
發(fā)送get和post請(qǐng)求都要經(jīng)過(guò)以下四個(gè)步驟
1:初始化XMLHttpRequest對(duì)象 為了提高程序的兼容性 需要?jiǎng)?chuàng)建一個(gè)跨瀏覽器的XMLHtppRequest對(duì)象 并且判斷是否成功
if(window.XMLHttpRequest){ http_request=new XMLHttpRequest(); } else if(window.ActiveObject){ try{ http_request=new ActiveXObject("Msxml2.XMLHTTP"); } cathc(e){ try{ http_request=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){} } }
2:為XMLHttpRequest對(duì)象指定一個(gè)返回結(jié)果處理函數(shù) 用于對(duì)返回結(jié)果進(jìn)行處理
3:創(chuàng)建一個(gè)與服務(wù)器的連接 在創(chuàng)建時(shí) 需要指定發(fā)送請(qǐng)求的方式以及設(shè)置是否采用異步方法發(fā)送請(qǐng)求
4:向服務(wù)器發(fā)送請(qǐng)求 XMLHttpRequest對(duì)象的send方法可以向服務(wù)器發(fā)送請(qǐng)求 該方法需要傳遞一個(gè)參數(shù) 如果發(fā)送的時(shí)GET請(qǐng)求 則參數(shù)可以設(shè)置為NULL POST請(qǐng)求則要指定參數(shù)
處理服務(wù)器響應(yīng)
XMLHttpRequest對(duì)象提供了兩個(gè)用來(lái)訪(fǎng)問(wèn)服務(wù)器響應(yīng)的屬性 一個(gè)時(shí)responseText屬性 返回字符串響應(yīng) 另一個(gè)時(shí)responseXML屬性 返回XML響應(yīng)
1:處理字符串響應(yīng)
通常應(yīng)用在響應(yīng)不是特別復(fù)雜的情況下
2:處理XML響應(yīng)
如果在服務(wù)器端需要生成特別復(fù)雜的響應(yīng) 那么就需要應(yīng)用XML響應(yīng) 應(yīng)用XMLHttpRequest對(duì)象的responseXML屬性 可以生成一個(gè)XML文檔
解決中文亂碼問(wèn)題
1:當(dāng)接收使用GET方法提交的數(shù)據(jù)時(shí) 要將編碼轉(zhuǎn)換為GBK或者UTF-8
String seIProvince=request.getParameter("parProvince"); seIProvince=new String(seIProvince.getBytes("ISO-8859-1"),("UTF-8");
2:應(yīng)用POST方法提交數(shù)據(jù)時(shí)
String username=request.getParameter("user"); username=new String(username.getBytes("ISO-8859-1"),("UTF-8");
五、Ajax重構(gòu)
Ajax的實(shí)現(xiàn)主要依賴(lài)于XMLHttpRequest對(duì)象 如果在調(diào)用其進(jìn)行異步數(shù)據(jù)傳輸時(shí) 由于XMLHttpRequest對(duì)象的實(shí)例在處理事件完成后就會(huì)被銷(xiāo)毀 所以如果不對(duì)該對(duì)象進(jìn)行封裝處理,在下次需要調(diào)用它的時(shí)猴就要重新構(gòu)建,浪費(fèi)資源并且浪費(fèi)事件,不過(guò)JavaScript腳本語(yǔ)言支持OO編碼風(fēng)格,通過(guò)它將Ajax所必需的功能封裝在對(duì)象中 分為以下三步
1:創(chuàng)建一個(gè)單獨(dú)的JS文件 命名為AjaxRequest.js 并且在該文件中編寫(xiě)重構(gòu)Ajax所需要的代碼
2:在需要應(yīng)用Ajax的頁(yè)面應(yīng)用以下語(yǔ)句
<script language="javascript" src="AjaxRequest.js"></script>
3:在應(yīng)用Ajax的頁(yè)面中編寫(xiě)錯(cuò)誤處理的方法 實(shí)例化Ajax對(duì)象的方法和回調(diào)函數(shù)
<script language="javascript"> function onerror(){ alert("您的操作有錯(cuò)誤"); } function getInfo(){ var loader=new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET"); } function deal_getInfo(){ document.getElementById("showInfo").innerHTML=this.req.responseText; } </script>
有兩個(gè)實(shí)例分別是級(jí)聯(lián)下拉列表的創(chuàng)建和顯示進(jìn)度條 代碼過(guò)多此處不展示
到此這篇關(guān)于Java Web中Ajax技術(shù)使用方法介紹的文章就介紹到這了,更多相關(guān)JavaWeb Ajax內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解使用spring cloud config來(lái)統(tǒng)一管理配置文件
這篇文章主要介紹了詳解使用spring cloud config來(lái)統(tǒng)一管理配置文件,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12spring集成httpclient配置的詳細(xì)過(guò)程
spring框架是一個(gè)非常強(qiáng)大的框架這里就不多說(shuō)了,那么主要是介紹spring與httpclient的整合集成過(guò)程,感興趣的朋友跟隨小編一起看看吧2021-07-07java設(shè)計(jì)模式之抽像工廠(chǎng)詳解
這篇文章主要為大家詳細(xì)介紹了java設(shè)計(jì)模式之抽像工廠(chǎng)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09MyBatis使用級(jí)聯(lián)操作解決lombok構(gòu)造方法識(shí)別失敗問(wèn)題
這篇文章主要介紹了MyBatis使用級(jí)聯(lián)操作解決lombok構(gòu)造方法識(shí)別失敗問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07基于Java的guava開(kāi)源庫(kù)工具類(lèi)
guava是谷歌基于java封裝好的開(kāi)源庫(kù),這篇文章主要通過(guò)介紹幾個(gè)好用的guava工具類(lèi),感興趣的朋友可以參考下面文章內(nèi)容2021-09-09一步步教你把SpringBoot項(xiàng)目打包成Docker鏡像
Docker可以讓開(kāi)發(fā)者打包他們的應(yīng)用以及依賴(lài)包到一個(gè)輕量級(jí)、可移植的容器中,然后發(fā)布到任何流行的 Linux 機(jī)器上,也可以實(shí)現(xiàn)虛擬化,下面這篇文章主要給大家介紹了關(guān)于SpringBoot項(xiàng)目打包成Docker鏡像的相關(guān)資料,需要的朋友可以參考下2023-02-02java之向linux文件夾下寫(xiě)文件無(wú)權(quán)限的問(wèn)題
這篇文章主要介紹了java之向linux文件夾下寫(xiě)文件無(wú)權(quán)限的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09