編輯“Ajax- 與服務(wù)器通信1”（章節(jié)）

== 使用innerHTML屬性創(chuàng)建動(dòng)態(tài)內(nèi)容 ==


如果將服務(wù)器響應(yīng)作為簡(jiǎn)單文本來(lái)訪問(wèn)，則靈活性欠佳。簡(jiǎn)單文本沒(méi)有結(jié)構(gòu)，很難用JavaScript進(jìn)行邏輯性的表述，而且要想動(dòng)態(tài)地生成頁(yè)面內(nèi)容也很困難。<br>

如果結(jié)合使用HTML元素的innerHTML屬性，responseText屬性就會(huì)變得非常有用。innerHTML屬性是一個(gè)非標(biāo)準(zhǔn)的屬性，最早在IE中實(shí)現(xiàn)，后來(lái)也為其他許多流行的瀏覽器所采用。這是一個(gè)簡(jiǎn)單的串，表示一組開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間的內(nèi)容。<br>

[[Image:Image004.gif?]]
通過(guò)結(jié)合使用responseText和inner-
HTML，服務(wù)器就能“生產(chǎn)”或生成HTML內(nèi)容，由瀏覽器使用innerHTML屬性來(lái)“消費(fèi)”或處理。下面的例子展示了一個(gè)搜索功能，這是使用XMLHttpRequest對(duì)象、其responseText屬性和HTML元素的innerHTML屬性實(shí)現(xiàn)的。點(diǎn)擊search（搜索）按鈕將在服務(wù)器上啟動(dòng)“搜索”，服務(wù)器將生成一個(gè)結(jié)果表作為響應(yīng)。瀏覽器處理響應(yīng)時(shí)將div元素的innerHTML屬性設(shè)置為XMLHttpRequest對(duì)象的response-   
Text屬性值。圖3-1顯示了點(diǎn)擊search按鈕而且在窗口內(nèi)容中增加了結(jié)果表之后的瀏覽器窗口。<br>

第2章的例子只是將服務(wù)器響應(yīng)顯示在警告框中，這個(gè)例子的代碼與它很相似。具體步驟如下：<br>

1. 點(diǎn)擊search按鈕，調(diào)用startRequest函數(shù)，它先調(diào)用createXMLHttpRequest函數(shù)來(lái)初始化XMLHttpRequest對(duì)象的一個(gè)新實(shí)例；<br>
2. startRequest函數(shù)將回調(diào)函數(shù)設(shè)置為handleStateChange函數(shù)；<br>
3. startRequest函數(shù)使用open()方法來(lái)設(shè)置請(qǐng)求方法（GET）及請(qǐng)求目標(biāo)，并且設(shè)置為異步地完成請(qǐng)求；<br>
4. 使用XMLHttpRequest對(duì)象的send()方法發(fā)送請(qǐng)求；<br>
5. XMLHttpRequest對(duì)象的內(nèi)部狀態(tài)每次有變化時(shí)，都會(huì)調(diào)用handleStateChange函數(shù)。一旦接收到響應(yīng)（如果readyState屬性的值為4），div元素的innerHTML屬性就將使用XMLHttpRequest對(duì)象的responseText屬性設(shè)置。<br>
代碼清單3-1顯示了innerHTML.html。代碼清單3-2顯示了innerHTML.xml，表示搜索生成的內(nèi)容。<br>

代碼清單3-1　innerHTML.html<br>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br>
 <html xmlns="http://www.w3.org/1999/xhtml"><br>
 <head><br>
 <title>Using responseText with innerHTML</title><br>
 <script type="text/javascript"><br>
 var xmlHttp;<br>
 function createXMLHttpRequest() {<br>
    if (window.ActiveXObject) {<br>
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
    }<br>
    else if (window.XMLHttpRequest) {<br>
        xmlHttp = new XMLHttpRequest();<br>
    }<br>
 }<br>
 function startRequest() {<br>
    createXMLHttpRequest();<br>
    xmlHttp.onreadystatechange = handleStateChange;<br>
    xmlHttp.open("GET", "innerHTML.xml", true);<br>
    xmlHttp.send(null);<br>
 }<br>
 function handleStateChange() {<br>
    if(xmlHttp.readyState == 4) {<br>
        if(xmlHttp.status == 200) {<br>
            document.getElementById("results").innerHTML = xmlHttp.responseText;<br>
       }<br>
    }<br>
 }<br>
 </script><br>
 </head><br>
 <body><br>
    <form action="#"><br>
        <input type="button" value="Search for Today's Activities"<br>
                onclick="startRequest();"/><br>
    </form><br>
    <div id="results"></div><br>
 </body><br>
 </html><br>

代碼清單3-2　innerHTML.xml

 <table border="1"><br>
     <nowiki><tbody></nowiki><br>
       <nowiki><tr></nowiki><br>
            <nowiki><th>Activity Name</th></nowiki><br>
            <nowiki><th>Location</th></nowiki><br>
            <nowiki><th>Time</th></nowiki><br>
        <nowiki></tr></nowiki><br>
        <nowiki><tr></nowiki><br>
            <nowiki><td>Waterskiing</td></nowiki><br>
           <nowiki><td>Dock #1</td></nowiki><br>
            <nowiki><td>9:00 AM</td></nowiki><br>
        <nowiki></tr></nowiki><br>
        <nowiki><tr></nowiki><br>
            <nowiki><td>Volleyball</td></nowiki><br>
            <nowiki><td>East Court</td></nowiki><br>
            <nowiki><td>2:00 PM</td></nowiki><br>
        <nowiki></tr></nowiki><br>
        <nowiki><tr></nowiki><br>
           <nowiki><td>Hiking</td><</nowiki>br>
            <nowiki><td>Trail 3</td></nowiki><br>
           <nowiki><td>3:30 PM</td></nowiki><br>
        <nowiki></tr></nowiki><br>
    <nowiki></tbody></nowiki><br>
 <nowiki></table></nowiki><br>

使用responseText和innerHTML可以大大簡(jiǎn)化向頁(yè)面增加動(dòng)態(tài)內(nèi)容的工作。遺憾的是，這種方法存在一些缺陷。前面已經(jīng)提到，innerHTML屬性不是HTML元素的標(biāo)準(zhǔn)屬性，所以與標(biāo)準(zhǔn)兼容的瀏覽器不一定提供這個(gè)屬性的實(shí)現(xiàn)。不過(guò)，當(dāng)前大多數(shù)瀏覽器都支持innerHTML屬性?？尚Φ氖?，IE是率先使用innerHTML的瀏覽器，但它的innerHTML實(shí)現(xiàn)反而最受限制。如今許多瀏覽器都將innerHTML屬性作為所有HTML元素的讀/寫(xiě)屬性。與此不同，IE則有所限制，在表和表行之類(lèi)的HTML元素上innerHTML屬性僅僅是只讀屬性，從一定程度上講，這就限制了它的用途。<br>