DOM及AJAX基本概念


 

DOM(document object model)

節點:整個文檔就是一個文檔節點,而每一個HTML標籤就是一個元素節點,標籤中的文字則是文本節點,標籤的屬性是屬性節點,一切都是節點;

DOM屬性:

nodeName:一個字符串,其內容是給定節點的名字。

var name=node.nodeName;

如果節點是元素節點,nodeName返回這個元素的名稱;

如果是屬性節點,nodeName返回這個屬性的名稱;

如果是文本節點,nodeName返回一個內容爲#text的字符串;

注:nodeName是一個只讀屬性;

nodeType:返回一個整數,這個數值代表着給定節點的類型;

nodeType:屬性返回的屬性值對應着12種節點類型,常用的有3種:

1、  Node.ELEMENT_NODE------1à元素節點

2、  Node.ATTRIBUTE_NODE----2à屬性節點

3、  Node.TEXT_NODE-------------3à文本節點

nodeValue:返回給定節點的當前值(字符串)

1、  如果給定節點是一個屬性節點,返回值是這個屬性的值

2、  如果給定的值是一個文本節點,返回值是這個文本節點的內容

3、  如果給定節點是一個元素節點,返回值是null

nodeValue是一個讀/寫屬性,但不能對元素節點的nodeValue屬性設置值,但可以爲文本節點的nodeValue屬性設置一個值。

       var li=document.getElementById(“li”);

       li.firstChild.nodeValue=”國慶60”;

替換節點:

replaceChild( ):把一個給定父元素裏的一個子節點替換爲另外一個子節點;

var reference=element.replaceChild(newChild,oldChild);返回值是一個指向已被替換的那個子節點的引用指針;

如果被插入的子節點還有子節點,則那些子節點也被插入到目標節點中;

appendChild()、insertBeforenewTarget,oldTareget);

1、  document.createElement( “li”);

2、  setAttribute(“ ”,” ”);

3、  document.createTextNode(“ ”);

4、  appendChild( );

刪除節點:removeChild();

:在邏輯運算中,0、“”、falsenullundefinedNaN均表示false

       Null:對象不存在;

       Undefined:聲明的變量沒有初始化,或者對象屬性、方法不存在;

AJAX

同步交互和異步交互:

普通B/S模式(同步)、AJAX技術(異步)

1、  同步:提交請求à等待服務器處理à處理完畢返回(這個期間客戶端瀏覽器不能幹任何事)

2、  異步:請求通過事件觸發à服務器處理(這時瀏覽器可以做其他事情)à處理完畢

同步是指:發送方發出數據後,等待接收方發出響應以後才發下一個數據包的通訊方式;

異步是指:發送方發出數據後,不等接收方發回響應,接着發送下個數據包的通訊方式;

AJAX Asynchronous JavaScript and XML:允許瀏覽器與服務器通信而無需刷新當前頁面的技術;

AJAX的工作原理:AJAX採用異步交互過程,AJAX在用戶與服務器之間引入一箇中間媒介,從而消除了網絡交互過程中的處理----等待----處理-----等待缺點;

用戶的瀏覽器在執行任務時即裝載了AJAX引擎,AJAX引擎用JavaScript編寫,通常藏在一個隱藏的框架中,他負責編譯用戶界面與服務器之間的交互;

AJAX建立和服務器的鏈接,接收服務器的請求,處理服務器返回的數據:

1、  創建XMLHttpRequest對象

2、  打開和服務器的連接(openmethodurlasynch))à請求方式、請求路徑、是否異步

3、  發送數據(send())à若get,傳null

4、  接收服務端的響應

服務器端的數據必須以瀏覽器能夠理解的格式來發送:XMLJSONHTML

JSON規則:

1、  映射用冒號(“:”)表示,名稱:值

2、  並列的數據之間用逗號(“,”)分隔;名稱1:值1,名稱2:值2

3、  映射的集合(對象)用大括號(“{ }”)表示;{名稱1:值1,名稱2:值2}

4、  並列數據的集合(數組)用方括號(“[ ]”)表示

[

        {名稱1:值1,名稱2:值2}

        {名稱1:值1,名稱2:值2}

]

5、  元素值可具有的類型:stringnumberobjectarraytruefalsenull;

 

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章