使用ajax，通過會把服務(wù)器端響應(yīng)獲取到reponseText或者reponseXML中的信息，以某種方法動態(tài)的寫到div和span標(biāo)記中，這樣，可以在無刷新的情況下，改變頁面內(nèi)容的顯示。
通過javascript進(jìn)行動態(tài)的修改，修改的方法有兩種：
1. 一種是使用html的每個標(biāo)記的innerHTML屬性，使用此屬性，只要為它提供一個有意義的html代碼片段，那么html解釋器就可以將其中的內(nèi)容進(jìn)行解釋，并顯示在頁面上，使用這種方式比較簡單，每次修改前不需要先把原來的內(nèi)容清除掉，而可以直接進(jìn)行填充，填充的同時會把原來的內(nèi)容覆蓋掉。這種方式雖然簡單，但是目前還不是w3c的標(biāo)準(zhǔn)，不過主流的瀏覽器如IE,firefox都已經(jīng)采用。
2. 另外一種是創(chuàng)建一個Text Node節(jié)點作為div和span元素的子節(jié)點，采用這種方式，div和span中要顯示的內(nèi)容保存在Text Node中，這樣div和span元素顯示的內(nèi)容是由Text Node提供的。需要注意的是：在每次填寫內(nèi)容時，需要先把原來的Text Node刪除掉，然后新建一個Text Node再寫入內(nèi)容。如果不刪除的話，那么每次調(diào)用填充操作時，都會新建一個新的Text Node，也就造成div和span元素下有多個Text Node節(jié)點，并且每個Text Node都會把自身的內(nèi)容顯示出來，因此不會覆蓋原來的內(nèi)容。
3. 通過不刪除已有的Text Node，每次填充時創(chuàng)建一個新的Text Node，可以進(jìn)行多次append操作，那么對于每次操作不需要覆蓋原有的情況，可以使用這種方式來實現(xiàn)。
實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript">
function fillDivWithInnerHTML() {
var username = document.getElementById("username").value;
var textDiv = document.getElementById("textDiv");
textDiv.innerHTML=username;
}
function fillDivWithTextNode() {
var textDiv = document.getElementById("textDiv");
//首先刪除所有已新建的Text Node節(jié)點
while(textDiv.hasChildNodes()) {
textDiv.removeChild(textDiv.childNodes[0]);
}
var textNode = document.createTextNode(document.getElementById("username").value);
textDiv.appendChild(textNode);
}
function fillSpanWithInnerHTML() {
var username = document.getElementById("username").value;
var textSpan = document.getElementById("textSpan");
textSpan.innerHTML=username;
}
function fillSpanWithTextNode() {
var textSpan = document.getElementById("textSpan");
//首先刪除所有已新建的Text Node節(jié)點
while(textSpan.hasChildNodes()) {
textSpan.removeChild(textSpan.childNodes[0]);
}
var textNode = document.createTextNode(document.getElementById("username").value);
textSpan.appendChild(textNode);
}
</script>
</head>
<body>
<input type="text" id="username" name="username"/><br/>
<input type="button" id="fillDivWithInnerHTML" value="fillDivWithInnerHTML" onclick="fillDivWithInnerHTML()"/>
<br/>
<input type="button" id="fillDivWithTextNode" value="fillDivWithTextNode" onclick="fillDivWithTextNode()"/>
<br/>
<input type="button" id="fillSpanWithInnerHTML" value="fillSpanWithInnerHTML" onclick="fillSpanWithInnerHTML()"/>
<br/>
<input type="button" id="fillSpanWithTextNode" value="fillSpanWithTextNode" onclick="fillSpanWithTextNode()"/>
<span id="textSpan"></span><br/>
<div id="textDiv"></div>
</body>
</html>
