使用ajax，通過會把服務器端響應獲取到reponseText或者reponseXML中的信息，以某種方法動態的寫到div和span標記中，這樣，可以在無刷新的情況下，改變頁面內容的顯示。
通過javascript進行動態的修改，修改的方法有兩種：
1. 一種是使用html的每個標記的innerHTML屬性，使用此屬性，只要為它提供一個有意義的html代碼片段，那么html解釋器就可以將其中的內容進行解釋，並顯示在頁面上，使用這種方式比較簡單，每次修改前不需要先把原來的內容清除掉，而可以直接進行填充，填充的同時會把原來的內容覆蓋掉。這種方式雖然簡單，但是目前還不是w3c的標准，不過主流的瀏覽器如IE,firefox都已經采用。
2. 另外一種是創建一個Text Node節點作為div和span元素的子節點，采用這種方式，div和span中要顯示的內容保存在Text Node中，這樣div和span元素顯示的內容是由Text Node提供的。需要注意的是：在每次填寫內容時，需要先把原來的Text Node刪除掉，然后新建一個Text Node再寫入內容。如果不刪除的話，那么每次調用填充操作時，都會新建一個新的Text Node，也就造成div和span元素下有多個Text Node節點，並且每個Text Node都會把自身的內容顯示出來，因此不會覆蓋原來的內容。
<html>
<head>
<style>
.css1{background-color:ff0000;color:ff9966;border:1;cursor:hand;}
.css2{background-color:00ff00;color:ffffff;border:1;cursor:hand;}
</style>
<script type="text/javascript">
function changeneirong()
{
var spanv = document.getElementsByTagName("span");
spanv[2].innerHTML = "我由常軍魁變為了span";
}
function changediv()
{
document.getElementsByTagName("div")[0].innerHTML = "我由常軍魁變成了div";
}
function changep()
{
document.getElementsByTagName("p")[0].innerHTML = "我由常軍魁變成了p標簽";
}
function change()
{
var spanvar = document.getElementsByTagName("span");
alert(spanvar[0].innerHTML);
document.getElementsByTagName("span")[0].className = "css2";
}
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節點
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節點
while(textSpan.hasChildNodes()) {
textSpan.removeChild(textSpan.childNodes[0]);
}
var textNode = document.createTextNode(document.getElementById("username").value);
textSpan.appendChild(textNode);
}
</script>
</head>
<body>
<span class="css1" onclick="change()">常軍魁</span>
<span class="css1" onclick="javascript:this.className='css2'">這是一段文字
</span>
<br />
<span onclick="changeneirong()" style="corsur:hand;">常軍魁</span>
<br />
<div onclick="changediv()">常軍魁</div>
<p onclick="changep()">常軍魁</p>
<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>