AJAX初級教程之初識AJAX
從剛剛接觸B/S開發(fā)，就耳聞AJAX技術(shù)，但一直處于模棱兩可的狀態(tài)，大道理明白，一到動手就傻眼了。
AJAX仿佛就是深不可測的技術(shù)，成為B/S學(xué)習(xí)過程中的一個陰影。
直到前些日子，小菜才真正開始AJAX實踐，真正動手了才發(fā)現(xiàn)，AJAX并沒有那么困難，如果不考慮AJAX的變型應(yīng)用，只考慮AJAX基本應(yīng)用，它還是相當(dāng)簡單的，過于復(fù)雜的理論阻礙了我們動手的積極性。
因此，本系列教程將從實用的角度出發(fā)，以最快的速度讓讀者掌握基本的AJAX應(yīng)用，以最直接的方式展示AJAX技術(shù)。
為了更好的閱讀本系列教程，對讀者有如下要求：
l 熟悉HTML。
l 熟悉HTTP協(xié)議。
l 熟悉javascript。
l 熟悉XML。
l 熟悉XML DOM。
AJAX并不是一項新技術(shù)，它只是一個新標(biāo)準(zhǔn)。根據(jù)小菜個人理解，所謂AJAX技術(shù)，即為了實現(xiàn)客戶端和服務(wù)器的后臺交互，以xml作為信息載體，利用javascript進行控制，通過HTTP協(xié)議進行交互，達(dá)到html界面部分刷新的效果。
下面小談一下這些技術(shù)。
HTML沒啥好說的。
HTTP協(xié)議內(nèi)容就比較多了。在AJAX實踐中，會涉及到POST、GET方法請求數(shù)據(jù)、HTTP頭部信息的構(gòu)造、數(shù)據(jù)的解析格式等，主要就是這三項，看看哪個不熟悉，趕緊補習(xí)吧！不過都很簡單，不要有壓力。
小菜覺得AJAX就是在寫Javascript腳本，javascript負(fù)責(zé)聲明一個至關(guān)重要的XMLHttpRequest對象，這個對象通過POST或GET方法向服務(wù)器發(fā)送請求，取得xml的格式的返回數(shù)據(jù)，再把xml解析，展示在界面上，這就是AJAX執(zhí)行過程。
xml無非就是一種數(shù)據(jù)規(guī)范，它可以使數(shù)據(jù)具有一定結(jié)構(gòu)，這樣一來，方便了數(shù)據(jù)組織，又方便了數(shù)據(jù)擴展。
xml的基本組成是元素，也就是HTML中常說的標(biāo)簽，例如：<book></book>；而元素和元素又可以嵌套，例如：<book><name></name></book>。同時，元素又可以擁有屬性，例如：<book><name data=”一千零一夜”></name></book>。
這樣一來，xml就可以表示非常豐富、靈活的信息，甚至可以當(dāng)成小型數(shù)據(jù)庫來用。
在此，小提一下，建議用子元素的方法來擴展元素，例如：<book><name></name></book>，不建議用屬性的方式擴展元素，例如：<book name=””></book>，因為子元素比屬性更加靈活，也符合xml的設(shè)計思想。
想要用Javascript操作xml，必須了解基本的DOM(Document Object Model)知識。為了方便讀者學(xué)習(xí)，小菜簡單介紹一下XML DOM。
根據(jù)DOM定義，xml中每個成分都是一個節(jié)點。根據(jù)小菜的理解，成分的含義就是xml的組成部分。
具體如下：
l 整個文檔是一個文檔節(jié)點。
l 每個xml標(biāo)簽是一個元素節(jié)點。例如<book></book>是一對標(biāo)簽，也叫元素節(jié)點，又叫元素。
l 包含在xml元素中的文本是文本節(jié)點。例如<name>一千零一夜</name>，其中“一千零一夜”就是文本節(jié)點。
l xml元素的屬性叫屬性節(jié)點。例如<book serialNumber=”0905024”></book>，其中serialNumber就是屬性節(jié)點。
節(jié)點有三個非常重要的屬性，分別為：nodeName(節(jié)點名稱)、nodeValue(節(jié)點值)、nodeType(節(jié)點類型)。其中nodeName和nodeValue非常常用，必須搞清楚。
對于nodeName(只讀)有：
l 元素節(jié)點的nodeName與該元素的標(biāo)簽名相同。例如元素<book></book>，它的nodeName就是book。
l 屬性節(jié)點的nodeName就是屬性名稱。例如<book serialNumber=” 0905024”></book>，屬性節(jié)點是serialNumber，那么它的nodeName屬性也是serialNumber。
l 文本節(jié)點的nodeName是固定的#text字符串。例如<name>一千零一夜</name>，文本節(jié)點是“一千零一夜”，它的nodeName將返回”#text”這個固定字符串。
對于nodeValue(讀/寫)有：
l 元素節(jié)點的nodeValue返回undefind。例如<book></book>元素，它的nodeValue屬性將返回undefind。
l 屬性節(jié)點的nodeValue即該屬性的值。例如<book serialNumber=” 0905024”></book>，屬性節(jié)點是serialNumber，它的nodeValue返回0905024。
l 文本節(jié)點的nodeValue即文本自身內(nèi)容。例如<name>一千零一夜</name>，文本節(jié)點是“一千零一夜”，它的nodeValue返回“一千零一夜”。這個一定要特別注意！?。”纠衝ame元素包含了一個“一千零一夜”文本節(jié)點，“一千零一夜”并不是name元素的值(nodeValue)！name元素的值(nodeValue)是undefind！因此實際編程時要注意，當(dāng)獲取到name元素時，還要類似firstChild、childNodes[0]這樣進一步獲取元素中包含的文本節(jié)點，然后才能用nodeValue屬性讀出文本內(nèi)容。
綜上，可以用一張圖概括AJAX技術(shù)：
小菜精力有限，水平也有限，不可能把這些技術(shù)講的很細(xì)，還需要讀者有一定基礎(chǔ)，本系列文章的目的是通過小菜的實戰(zhàn)例子，讓讀者對AJAX恍然大悟，認(rèn)清AJAX本質(zhì)。
相關(guān)文章
Ajax方式實現(xiàn)定期更新頁面某塊內(nèi)容的方法
這篇文章主要介紹了Ajax方式實現(xiàn)定期更新頁面某塊內(nèi)容的方法,涉及jquery中l(wèi)oad方法Ajax調(diào)用及setInterval定時執(zhí)行的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本文通過三個實例給大家講解了Ajax和$.ajax使用實例詳解，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02
今天小編就為大家分享一篇layUI ajax加載html頁面后重新渲染的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
雖然ajax全稱是asynchronous javascript and XML。但目前使用ajax技術(shù)時，傳遞JSON已經(jīng)成為事實上的標(biāo)準(zhǔn)。這篇文章主要介紹了Ajax 傳遞JSON實例代碼,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Ajax驗證用戶名是否存在的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
和大家一起聊一聊Ajax的優(yōu)缺點，Ajax是一個動態(tài)的WEB應(yīng)用的開發(fā)技術(shù)，它的出現(xiàn)豐富了用戶的體驗，今天就和大家進一步的了解Ajax,感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細(xì)介紹了ajax實現(xiàn)提交時校驗表單方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
ajax的json傳值想必大家早有所耳聞了吧，本文介紹下jsp頁面中json傳值應(yīng)用，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03
ajax提交到j(luò)ava后臺之后處理數(shù)據(jù)的實現(xiàn)
下面小編就為大家?guī)硪黄猘jax提交到j(luò)ava后臺之后處理數(shù)據(jù)的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息
新浪的財金頻道一直感覺做得很好。但由于最近網(wǎng)速慢的緣故，查看股票信息時網(wǎng)頁老是打不開。這幾天一直在研究ajax，于是用jquery自己做了一個自動讀取新浪股票實時數(shù)據(jù)的頁面。2008-11-11