輕松理解JavaScript之AJAX
摘要
AJAX技術(shù)是網(wǎng)頁(yè)構(gòu)建的必備技能之一,本文希望能幫助大家輕松的學(xué)習(xí)這項(xiàng)技術(shù)
一、什么是ajax?
ajax(異步j(luò)avascript xml) 能夠刷新局部網(wǎng)頁(yè)數(shù)據(jù)而不是重新加載整個(gè)網(wǎng)頁(yè)。
二、如何使用ajax?
第一步:創(chuàng)建xmlhttprequest對(duì)象
創(chuàng)建xmlhttprequest對(duì)象,XMLHttpRequest對(duì)象用來(lái)和服務(wù)器交換數(shù)據(jù)。
var xmlhttp =new XMLHttpRequest();
第二步:注冊(cè)回調(diào)函數(shù)
onreadystatechange函數(shù),當(dāng)服務(wù)器響應(yīng)請(qǐng)求并返回?cái)?shù)據(jù)后,我們想要客戶端處理這些數(shù)據(jù)就需要使用onreadystatechange函數(shù),每次xmlhttprequest對(duì)象的readyState發(fā)生改變都會(huì)觸發(fā)onreadystatechange函數(shù)。對(duì)于readyState會(huì)在下一章節(jié)詳細(xì)介紹。
xmlHttp.onreadystatechange= callback; function callback(){}
第三步:配置和發(fā)送請(qǐng)求
使用xmlhttprequest對(duì)象的open()和send()方法配置和發(fā)送資源請(qǐng)求給服務(wù)器。
xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或資源的路徑,async參數(shù)為true(代表異步)或者false(代表同步)
xmlhttp.send();使用get方法發(fā)送請(qǐng)求到服務(wù)器。
xmlhttp.send(string);使用post方法發(fā)送請(qǐng)求到服務(wù)器。
post表單數(shù)據(jù)需要使用xmlhttprequest對(duì)象的setRequestHeader方法增加一個(gè)HTTP頭。
post 發(fā)送請(qǐng)求什么時(shí)候能夠使用呢?
(1)更新一個(gè)文件或者數(shù)據(jù)庫(kù)的時(shí)候。
(2)發(fā)送大量數(shù)據(jù)到服務(wù)器,因?yàn)閜ost請(qǐng)求沒(méi)有字符限制。
(3)發(fā)送用戶輸入的加密數(shù)據(jù)。
xhttp.open("POST", "ajax_test.aspx", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford");
第四步:處理響應(yīng)數(shù)據(jù)
使用xmlhttprequest對(duì)象的responseText或responseXML屬性獲得服務(wù)器的響應(yīng)。
使用responseText屬性得到服務(wù)器響應(yīng)的字符串?dāng)?shù)據(jù),使用responseXML屬性得到服務(wù)器響應(yīng)的XML數(shù)據(jù)。
在回調(diào)函數(shù)中使用readyState==4和status==200判斷交互是否結(jié)束,響應(yīng)是否正確,并根據(jù)需要獲取服務(wù)器端返回的數(shù)據(jù),更新頁(yè)面內(nèi)容。
function callback(){ if(xmlHttp.readyState == 4){ //判斷交互是否成功 if(xmlHttp.status == 200){ //獲取服務(wù)器返回的數(shù)據(jù) //獲取純文本數(shù)據(jù) var responseText =xmlHttp.responseText; document.getElementById("info").innerHTML = responseText; } } }
三、AJAX運(yùn)行過(guò)程中5種狀態(tài)(readyState)
在AJAX實(shí)際運(yùn)行當(dāng)中,對(duì)于訪問(wèn)XMLHttpRequest(XHR)時(shí)并不是一次完成的,而是分別經(jīng)歷了多種狀態(tài)后取得的結(jié)果,對(duì)于這種狀態(tài)在AJAX中共有5種,這五種狀態(tài)是由AJAX引擎切換設(shè)置的,分別是。
0 : 定義了XHR,但還未初始化
1 :調(diào)用send()方法,正在發(fā)送請(qǐng)求,請(qǐng)求發(fā)送完畢后,開(kāi)始等待接收響應(yīng)
2 :響應(yīng)接收完成
3 :正在解析響應(yīng)內(nèi)容
4 :響應(yīng)內(nèi)容解析完成,返回給客戶端調(diào)用
對(duì)于上面的狀態(tài),其中“0”狀態(tài)是在定義后自動(dòng)具有的狀態(tài)值,而對(duì)于成功訪問(wèn)的狀態(tài)(得到信息)我們大多數(shù)采用“4”進(jìn)行判斷。
值得注意的是,狀態(tài)每切換一次,都會(huì)觸發(fā)onreadystatechange 事件,所以整個(gè)過(guò)程onreadystatechange 事件被觸發(fā)5次
四、AJAX的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
1、最大的一點(diǎn)是頁(yè)面無(wú)刷新,在頁(yè)面內(nèi)與服務(wù)器通信,不需要打斷用戶的操作,具有更加迅速的響應(yīng)能力給用戶的體驗(yàn)非常好。
2、減輕服務(wù)器的負(fù)擔(dān),ajax的原則是“按需取數(shù)據(jù)”,可以最大程度的減少冗余請(qǐng)求,和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)。
缺點(diǎn)
1、ajax干掉了back按鈕,即對(duì)瀏覽器后退機(jī)制的破壞。
2、對(duì)搜索引擎的支持比較弱。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- jquery拼接ajax 的json和字符串拼接的方法
- 純JS實(shí)現(xiàn)AJAX局部刷新功能
- ajax響應(yīng)json字符串和json數(shù)組的實(shí)例(詳解)
- JavaScript中從setTimeout與setInterval到AJAX異步
- 解決ajax不能訪問(wèn)本地文件問(wèn)題(利用js跨域原理)
- 原生JavaScript實(shí)現(xiàn)AJAX、JSONP
- 用ajax傳遞json到前臺(tái)中文出現(xiàn)問(wèn)號(hào)亂碼問(wèn)題的解決辦法
- 詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
- jQuery基于ajax操作json數(shù)據(jù)簡(jiǎn)單示例
- AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法
相關(guān)文章
javascript面向?qū)ο蟪绦蛟O(shè)計(jì)(一)
這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計(jì),分享給大家一段代碼,注釋里講解的非常詳細(xì),有助于我們理解面向?qū)ο?,這里推薦給大家。2015-01-01JS下拉框內(nèi)容左右移動(dòng)效果的具體實(shí)現(xiàn)
這篇文章介紹了JS下拉框內(nèi)容左右移動(dòng)效果的具體實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-07-07js下寫(xiě)一個(gè)事件隊(duì)列操作函數(shù)
異步操作可能會(huì)產(chǎn)生你不希望的事件觸發(fā)順序。這個(gè)問(wèn)題以前也遇到過(guò),當(dāng)時(shí)沒(méi)想太多,也就是直接多層嵌套(在ajax返回以后嵌套下一個(gè)事件)來(lái)解決。2010-07-07Java遍歷集合方法分析(實(shí)現(xiàn)原理、算法性能、適用場(chǎng)合)
這篇文章主要介紹了Java遍歷集合方法分析(實(shí)現(xiàn)原理、算法性能、適用場(chǎng)合)的相關(guān)資料,需要的朋友可以參考下2016-04-04Javascript基礎(chǔ)學(xué)習(xí)之十個(gè)重要問(wèn)題
本文特別適合正在尋找Javascript開(kāi)發(fā)工作的初學(xué)者。再搜索了許多Javascript面試問(wèn)題后,發(fā)現(xiàn)這10個(gè)知識(shí)點(diǎn)很重要。讓我們一起深入研究一下2021-12-12JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查實(shí)例代碼
JS提供了很多方便操作數(shù)組的方法,這篇文章主要給大家介紹了關(guān)于JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07