使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示。
通过javascript进行动态的修改,修改的方法有两种:
1.
2.
3.
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function fillDivWithInnerHTML() {
var username = document.getElementByIdx_x("username").value;
var textDiv = document.getElementByIdx_x("textDiv");
textDiv.innerHTML=username;
}
function fillDivWithTextNode() {
var textDiv = document.getElementByIdx_x("textDiv");
//首先删除所有已新建的Text Node节点
while(textDiv.hasChildNodes()) {
textDiv.removeChild(textDiv.childNodes[0]);
}
var textNode = document.createTextNode(document.getElementByIdx_x("username").value);
textDiv.appendChild(textNode);
}
function fillSpanWithInnerHTML() {
var username = document.getElementByIdx_x("username").value;
var textSpan = document.getElementByIdx_x("textSpan");
textSpan.innerHTML=username;
}
function fillSpanWithTextNode() {
var textSpan = document.getElementByIdx_x("textSpan");
//首先删除所有已新建的Text Node节点
while(textSpan.hasChildNodes()) {
textSpan.removeChild(textSpan.childNodes[0]);
}
var textNode = document.createTextNode(document.getElementByIdx_x("username").value);
textSpan.appendChild(textNode);
}
</script>
</head>
<body>
<input type="text" id="username" name="username"/><br/>
<input type="button" id="fillDivWithInnerHTML" value="fillDivWithInnerHTML" οnclick="fillDivWithInnerHTML()"/>
<br/>
<input type="button" id="fillDivWithTextNode" value="fillDivWithTextNode" οnclick="fillDivWithTextNode()"/>
<br/>
<input type="button" id="fillSpanWithInnerHTML" value="fillSpanWithInnerHTML" οnclick="fillSpanWithInnerHTML()"/>
<br/>
<input type="button" id="fillSpanWithTextNode" value="fillSpanWithTextNode" οnclick="fillSpanWithTextNode()"/>
<span id="textSpan"></span><br/>
<div id="textDiv"></div>
</body>
</html>
引自:http://juwen270.blog.163.com/blog/static/804611022008112710819135