【文章內(nèi)容簡(jiǎn)介】 交互，也可以方便的和其他類型客戶端交互。 ? 很多時(shí)候，在 AJAX模式的程序中使用純文本內(nèi)容或是自定義的數(shù)據(jù)結(jié)構(gòu)進(jìn)行數(shù)據(jù)傳輸會(huì)更方便，實(shí)際上Google幾個(gè)有名的 AJAX模式產(chǎn)品使用的都不是 XML的數(shù)據(jù)。 北京傳智播客教育 AJAX技術(shù)核心 總結(jié) ——AJAX應(yīng)用的五個(gè)步驟： XMLHttpRequest對(duì)象 open方法與服務(wù)器建立鏈接 北京傳智播客教育 AJAX技術(shù)核心 需要注意的內(nèi)容： XMLHttpRequest對(duì)象的不同的建立方式 3. open方法三個(gè)參數(shù)含義，此外還需要注意 GET方式和POST方式服務(wù)器端地址的不同寫法 4. GET方式和 POST方式 send的參數(shù)的不同之處，以及POST方式下 send之前需要設(shè)置請(qǐng)求頭信息的工作 ，此外還要注意如何獲取響應(yīng)數(shù)據(jù)內(nèi)容。 北京傳智播客教育 AJAX技術(shù)核心 ? XMLHttpRequest的一個(gè)特殊安全問(wèn)題： ?IE：訪問(wèn)跨域頁(yè)面時(shí)會(huì)給出提示，用戶確認(rèn)后會(huì)訪問(wèn) ?Mozilla FireFox及其他：不允許訪問(wèn)跨域頁(yè)面 北京傳智播客教育 AJAX技術(shù)核心 I n d e x . h t m l瀏 覽 器W e b S e r v e r 1W e b S e r v e r 2獲 取 i n d e x . h t m lX M L H t t p R e q u e s t同 域 訪 問(wèn)X M L H t t p R e q u e s t跨 域 訪 問(wèn)北京傳智播客教育 AJAX技術(shù)核心 ? 如何解決跨域問(wèn)題？ I n d e x . h t m l瀏 覽 器W e b S e r v e r 1 W e b S e r v e r 2獲 取 i n d e x . h t m lX M L H t t p R e q u e s t 跨 域 訪 問(wèn)代 理獲 取 數(shù) 據(jù)北京傳智播客教育 AJAX技術(shù)核心 在瀏覽器端的代碼中，我們需要在調(diào)用 open方法之前判斷一下要連接的地址是不是以 開(kāi)頭的，如果是則認(rèn)為要訪問(wèn)的是跨域的資源，首先將當(dāng)前 url中的” ?”變成” amp?！?，這是因?yàn)閷⒁B接的地址改為” Proxy?url=” + url以后，如果原來(lái) url地址中有參數(shù)的話，新的 url地址中就會(huì)有兩個(gè)“ ?”這會(huì)導(dǎo)致服務(wù)器端解析參數(shù)錯(cuò)誤，” url=”之后的內(nèi)容表示本來(lái)要訪問(wèn)的跨域資源的地址。 function convertURL(url){ if((0,7) == url = (?,amp。)。 url = Proxy?url= + url。 } return url。 } 北京傳智播客教育 AJAX技術(shù)核心 ? 注意 Proxy中針對(duì) GET方式和 POST方式進(jìn)行了分別的處理，其中 GET方式仍然將參數(shù)信息拼到URL中，而 POST方式則向 HttpURLConnection的數(shù)據(jù)流中添加參數(shù)信息。 ? 由于對(duì)本來(lái)請(qǐng)求的地址和其包含的參數(shù)進(jìn)行了轉(zhuǎn)換，導(dǎo)致 url參數(shù)中只包含原來(lái)請(qǐng)求的地址信息，而原來(lái)請(qǐng)求的參數(shù)信息則需要我們解析出來(lái)和地址信息一起重新組成本來(lái)的請(qǐng)求 URL，因此方法開(kāi)頭的一段 while就做了這個(gè)工作。 北京傳智播客教育 AJAX技術(shù)核心 ? 注意由于進(jìn)入 servelt之前參數(shù)信息已經(jīng)被做過(guò)一次 URLDecoder，因此這個(gè)時(shí)候參數(shù)信息中的中文信息傳到真正要訪問(wèn)的 servlet時(shí)解碼會(huì)出現(xiàn)亂碼，因此我們?cè)倨唇訁?shù)信息之前又再一次通過(guò)了一次編碼，這樣就解決了中文的亂碼問(wèn)題。 ? 在從遠(yuǎn)端服務(wù)器讀取數(shù)據(jù)時(shí)，要顯示的指定輸入流的編碼格式，這樣才可以保證通過(guò)BufferReader讀到的內(nèi)容不會(huì)有亂碼信息。 北京傳智播客教育 AJAX技術(shù)核心 meta equiv=Expires content=0 meta equiv=Pragma content=nocache meta equiv=CacheControl content=nocache (CacheControl,nocache)。 北京傳智播客教育 AJAX技術(shù)核心 if((?) = 0){ url = url + amp。t= + (new Date()).valueOf()。 } else{ url = url + ?t= + (new Date()).valueOf()。 } ? 一個(gè)比較好的方法是給 url地址最后加上時(shí)間戳，這樣在瀏覽器看來(lái)每次請(qǐng)求的 url地址都不一樣，因此就不會(huì)出現(xiàn)緩存問(wèn)題，我們一般采用如下方式。其中 url是原始請(qǐng)求地址，代碼中根據(jù)原 url中是否已有參數(shù)信息來(lái)進(jìn)行時(shí)間戳參數(shù)的增加。 北京傳智播客教育 AJAX技術(shù)核心 ? DOM（ Document Object Model）被稱作文檔對(duì)象模型，它是語(yǔ)言和平臺(tái)中立的接口，允許程序和腳本動(dòng)態(tài)訪問(wèn)和更新文檔的內(nèi)容，結(jié)構(gòu)和風(fēng)格。 ? 在 AJAX中， DOM對(duì)于我們來(lái)說(shuō)是 HTML 和 XML 文檔的一個(gè)應(yīng)用程序接口，它可以把 HTML， XML與 AJAX中的開(kāi)發(fā)語(yǔ)言 Javascript連接起來(lái)。 ? Javascript中的 DOM實(shí)現(xiàn)可以使得我們?cè)?AJAX中通過(guò)Javascript代碼對(duì) HTML和 XML數(shù)據(jù)進(jìn)行 DOM方式的操作，從而做到頁(yè)面的動(dòng)態(tài)修改更新和數(shù)據(jù)的提取處理。 北京傳智播客教育 AJAX技術(shù)核心 ? HTML的 DOM和 XML的 DOM在 API接口上基本一致，使用差別不大，但本質(zhì)上有區(qū)別。 ? HTML的 DOM是一個(gè)內(nèi)存對(duì)象樹(shù)，在瀏覽器中只保存一份， HTML的 DOM修改 HTML的內(nèi)容會(huì)直接反應(yīng)到瀏覽器中；而 XML的 DOM則可以創(chuàng)建多個(gè)，每個(gè)可以對(duì)應(yīng)一個(gè) XML文本。 北京傳智播客教育 AJAX技術(shù)核心 ? DOM與 HTML 北京傳智播客教育 AJAX技術(shù)核心 ? 在 DOM眼中，HTML是由很多不同類型的節(jié)點(diǎn)組成的，這些節(jié)點(diǎn)都屬于 NODE對(duì)象。 ? NODE對(duì)象有一個(gè) nodeType的屬性可用于判斷節(jié)點(diǎn)類型 接口 nodeType常量 nodeType值 備注 Element 1 元素節(jié)點(diǎn) Attr 2 節(jié)點(diǎn)屬性 Text 3 文本節(jié)點(diǎn) Comment 8 注釋的文本 Document 9 Document根節(jié)點(diǎn) 北京傳智播客教育 AJAX技術(shù)核心 ? 元素節(jié)點(diǎn)是 HTML中最常見(jiàn)的節(jié)點(diǎn)，頁(yè)面中的body,input,div都是元素節(jié)點(diǎn)。 ? 屬性節(jié)點(diǎn)表示的是一個(gè)元素節(jié)點(diǎn)的某個(gè)屬性，例如 input中的 value屬性就可以被看作一個(gè)屬性節(jié)點(diǎn)。 ? 文本節(jié)點(diǎn)表示 HTML頁(yè)面中的一段文字信息，例如 divHello World/div，其中的” Hello World”就是一個(gè)文本節(jié)點(diǎn)。 北京傳智播客教育 AJAX技術(shù)核心 ? 注釋文本節(jié)點(diǎn)也比較好理解， HTML的注釋信息，!—Comment Message比如這樣一段內(nèi)容就是一個(gè)注釋文本節(jié)點(diǎn)。 ? 根節(jié)點(diǎn)顧名思義，表示的是 HTML的根，在Javascript中有一個(gè)特殊的對(duì)象 document，它可以表示 HTML的根節(jié)點(diǎn)，后面我們會(huì)介紹這個(gè)特殊對(duì)象有很多在 AJAX中非常常用的方法。 北京傳智播客教育 AJAX技術(shù)核心 ? 根節(jié)點(diǎn)的屬性和方法 屬性 描述 documentElement 表示文檔的根元素節(jié)點(diǎn) 在 HTML文檔中，它表示 html這個(gè)標(biāo)簽代表的元素節(jié)點(diǎn) 方法 描述 createAttribute() 用指定名字創(chuàng)建新的 Attr節(jié)點(diǎn)對(duì)象。 方法參數(shù)為屬性的名字 createComment() 用指定的字符串創(chuàng)建新的 Comment節(jié)點(diǎn)對(duì)象。 方法參數(shù)為注釋信息 createElement() 用指定的標(biāo)記名創(chuàng)建新的 Element節(jié)點(diǎn)對(duì)象。 方法參數(shù)為節(jié)點(diǎn)標(biāo)簽的名字 北京傳智播客教育 AJAX技術(shù)核心 ? 根節(jié)點(diǎn)的屬性和方法 方法 描述 createTextNode() 用指定的文本創(chuàng)建新的文本節(jié)點(diǎn)對(duì)象。 方法參數(shù)為文本信息 getElementById() 返回文檔中具有指定 id屬性的 Element節(jié)點(diǎn)。 方法參數(shù)為節(jié)點(diǎn)的 id屬性值 getElementsByTagName() 以數(shù)組方式返回文檔中具有指定標(biāo)記名的所有Element節(jié)點(diǎn)，其順序?yàn)樵谖臋n中出現(xiàn)的順序。標(biāo)記名指的是像 body,table這樣的HTML標(biāo)記名稱。 方法參數(shù)為標(biāo)記名稱 北京傳智播客教育 AJAX技術(shù)核心 ? Element節(jié)點(diǎn)對(duì)象的常用方法都是對(duì)節(jié)點(diǎn)屬性的操作。 屬性 描述 tagName 元素的標(biāo)記名字，例如 table元素的標(biāo)記名字為 table。 HTML文檔返回的標(biāo)記名字均為大寫。 方法 描述 getAttribute() 以字符串形式返回指定屬性的值 方法參數(shù)為屬性名稱 getAttributeNode() 以 Attr節(jié)點(diǎn)對(duì)象的形式返回指定屬性的值 方法參數(shù)為屬性名稱 getElementsByTabName() 以數(shù)組方式返回當(dāng)前元素節(jié)點(diǎn)的子孫節(jié)點(diǎn)中中具有指定標(biāo)記名的所有Element節(jié)點(diǎn)，其順序?yàn)樵谖臋n中出現(xiàn)的順序。 方法參數(shù)為節(jié)點(diǎn)的標(biāo)記名 北京傳智播客教育 AJAX技術(shù)核心 ? Element節(jié)點(diǎn)對(duì)象的常用方法都是對(duì)節(jié)點(diǎn)屬性的操作。 方法 描述 hasAttribute() 如果該元素具有指定名字的屬性，則返回 true removeAttribute() 從 Element節(jié)點(diǎn)中刪除指定的屬性 方法參數(shù)為屬性的名稱 removeAttributeNode() 從 Element節(jié)點(diǎn)的屬性列表中刪除指定的 Attr節(jié)點(diǎn) 方法參數(shù)為屬性的名稱 setAttribute() 把指定的屬性設(shè)置為指定的字符串值，如果該屬性不存在則添加一個(gè)新屬性 方法的第一個(gè)參數(shù)為屬性的名稱 方法的第二個(gè)參數(shù)為屬性的值 setAttributeNode() 把指定的 Attr節(jié)點(diǎn)添加到該元素的屬性列表中 方法的參數(shù)為 Attr節(jié)點(diǎn)對(duì)象 北京傳智播客教育 AJAX技術(shù)核心 ? 屬性節(jié)點(diǎn)的屬性 屬性 描述 name 屬性名 value 屬性值 北京傳智播客教育 AJAX技術(shù)核心 ? Node對(duì)象的屬性和方法如下所示 ： 屬性 描述 attributes 表示該節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)對(duì)象的數(shù)組 childNodes 表示當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)的數(shù)組。如果沒(méi)有子節(jié)點(diǎn)，則返回空數(shù)組 firstChild 返回當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)。如果沒(méi)有子節(jié)點(diǎn)，則返回 null lastChild 返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。如果沒(méi)有子節(jié)點(diǎn)，則返回 null nextSibling 返回當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。如果沒(méi)有這樣的節(jié)點(diǎn)，則返回 null 北京傳智播客教育 AJAX技術(shù)核心 ? Node對(duì)象的屬性和方法如下所示 ： 屬性 描述 previousSibling 返回當(dāng)前節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)。如果沒(méi)有這樣的節(jié)點(diǎn)則返回 null nodeName 返回節(jié)點(diǎn)的名字，對(duì)于 Element節(jié)點(diǎn)表示 Element的標(biāo)記名稱 nodeType 代表節(jié)點(diǎn)的類型 nodeValue 代表節(jié)點(diǎn)的內(nèi)容。對(duì)于 Text節(jié)點(diǎn)， nodeValue的值是文本內(nèi)容。對(duì)于注釋節(jié)點(diǎn)， nodeValue的值是注釋內(nèi)容。對(duì)于屬性節(jié)點(diǎn)， nodeValue的值是屬性值。對(duì)于其他節(jié)點(diǎn)，nodeValue的值可能為 null。 parentNode 返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。如果沒(méi)有父節(jié)點(diǎn)，則返回 null 北京傳智播客教育 AJAX技術(shù)核心 ? Node對(duì)象的屬性和方法如下所示 ： 方法 描述 appendChild() 給當(dāng)前節(jié)點(diǎn)增加一個(gè)子節(jié)點(diǎn)。增加的子節(jié)點(diǎn)位于當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)的末尾。 方法參數(shù)為 Node對(duì)象。 cloneNode() 復(fù)制當(dāng)前節(jié)點(diǎn)，或者復(fù)制當(dāng)前節(jié)點(diǎn)以及它的所有子孫節(jié)點(diǎn)。 方法參數(shù)為 true或 false。 True表示遞歸的復(fù)制所有子孫節(jié)點(diǎn)， false表示只復(fù)制當(dāng)前節(jié)點(diǎn)。 hasChildNodes() 如果當(dāng)前節(jié)點(diǎn)擁有子節(jié)點(diǎn)，則返回 true 北京傳智播客教育 AJAX技術(shù)核心 ? Node對(duì)象的屬性和方法如下所示 ： 方法 描述 insertBefore() 插入一個(gè)節(jié)點(diǎn)，位置在當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)之前。如果該節(jié)點(diǎn)已經(jīng)存在，則刪除原節(jié)點(diǎn)后再插入新的節(jié)點(diǎn)。如果指定子節(jié)點(diǎn)不存在，則執(zhí)行效果和appendChild方法相同。