AJAX實用教程——開篇

來源:互聯網
上載者:User

         從剛剛接觸B/S開發,就耳聞AJAX技術,但一直處於模稜兩可的狀態,大道理明白,一到動手就傻眼了。

        AJAX彷彿就是深不可測的技術,成為B/S學習過程中的一個陰影。

        直到前些日子,小菜才真正開始AJAX實踐,真正動手了才發現,AJAX並沒有那麼困難,如果不考慮AJAX的變型應用,只考慮AJAX基本應用,它還是相當簡單的,過於複雜的理論阻礙了我們動手的積極性。

        因此,本系列教程將從實用的角度出發,以最快的速度讓讀者掌握基本的AJAX應用,以最直接的方式展示AJAX技術。

        為了更好的閱讀本系列教程,對讀者有如下要求:

 

        l  熟悉HTML。

        l  熟悉HTTP協議。

        l  熟悉javascript。

        l  熟悉XML。

        l  熟悉XML DOM。

 

        AJAX並不是一項新技術,它只是一個新標準。根據小菜個人理解,所謂AJAX技術,即為了實現用戶端和伺服器的後台互動,以xml作為資訊載體,利用javascript進行控制,通過HTTP協議進行互動,達到html介面部分重新整理的效果。

 

        下面小談一下這些技術。

 

        HTML沒啥好說的。

        HTTP協議內容就比較多了。在AJAX實踐中,會涉及到POST、GET方法請求資料、HTTP頭部資訊的構造、資料的解析格式等,主要就是這三項,看看哪個不熟悉,趕緊補習吧!不過都很簡單,不要有壓力。

        小菜覺得AJAX就是在寫Javascript指令碼,javascript負責聲明一個至關重要的XMLHttpRequest對象,這個對象通過POST或GET方法向伺服器發送請求,取得xml的格式的返回資料,再把xml解析,展示在介面上,這就是AJAX執行過程。

        xml無非就是一種資料規範,它可以使資料具有一定結構,這樣一來,方便了資料群組織,又方便了資料擴充。

        xml的基本組成是元素,也就是HTML中常說的標籤,例如:<book></book>;而元素和元素又可以嵌套,例如:<book><name></name></book>。同時,元素又可以擁有屬性,例如:<book><name data=”一千零一夜”></name></book>。

        這樣一來,xml就可以表示非常豐富、靈活的資訊,甚至可以當成小型資料庫來用。

        在此,小提一下,建議用子項目的方法來擴充元素,例如:<book><name></name></book>,不建議用屬性的方式擴充元素,例如:<book name=””></book>,因為子項目比屬性更加靈活,也符合xml的設計思想。

        想要用Javascript操作xml,必須瞭解基本的DOM(Document Object Model)知識。為了方便讀者學習,小菜簡單介紹一下XML DOM。

        根據DOM定義,xml中每個成分都是一個節點。根據小菜的理解,成分的含義就是xml的組成部分。

        具體如下:

 

        l  整個文檔是一個文檔節點。

        l  每個xml標籤是一個元素節點。例如<book></book>是一對標籤,也叫元素節點,又叫元素。

        l  包含在xml元素中的文本是文本節點。例如<name>一千零一夜</name>,其中“一千零一夜”就是文本節點。

        l  xml元素的屬性叫屬性節點。例如<book serialNumber=”0905024”></book>,其中serialNumber就是屬性節點。

 

        節點有三個非常重要的屬性,分別為:nodeName(節點名稱)、nodeValue(節點值)、nodeType(節點類型)。其中nodeName和nodeValue非常常用,必須搞清楚。

 

        對於nodeName(唯讀)有:

 

        l  元素節點的nodeName與該元素的標籤名相同。例如元素<book></book>,它的nodeName就是book。

        l  屬性節點的nodeName就是屬性名稱。例如<book serialNumber=” 0905024”></book>,屬性節點是serialNumber,那麼它的nodeName屬性也是serialNumber。

        l  文本節點的nodeName是固定的#text字串。例如<name>一千零一夜</name>,文本節點是“一千零一夜”,它的nodeName將返回”#text”這個固定字串。

 

        對於nodeValue(讀/寫)有:

 

        l  元素節點的nodeValue返回undefind。例如<book></book>元素,它的nodeValue屬性將返回undefind。

        l  屬性節點的nodeValue即該屬性的值。例如<book serialNumber=” 0905024”></book>,屬性節點是serialNumber,它的nodeValue返回0905024。

        l  文本節點的nodeValue即文本自身內容。例如<name>一千零一夜</name>,文本節點是“一千零一夜”,它的nodeValue返回“一千零一夜”。這個一定要特別注意!!!本例中name元素包含了一個“一千零一夜”文本節點,“一千零一夜”並不是name元素的值(nodeValue)!name元素的值(nodeValue)是undefind!因此實際編程時要注意,當擷取到name元素時,還要類似firstChild、childNodes[0]這樣進一步擷取元素中包含的文本節點,然後才能用nodeValue屬性讀出常值內容。

 

        綜上,可以用一張圖概括AJAX技術:

        小菜精力有限,水平也有限,不可能把這些技術講的很細,還需要讀者有一定基礎,本系列文章的目的是通過小菜的實戰例子,讓讀者對AJAX恍然大悟,認清AJAX本質。

        本節到此結束。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.