Ajax修改數據即時顯示篇實現代碼
2024-09-01 08:29:14
供稿：網友
我們這次要請求的服務端網頁是：Edit_Data.Asp 待會我會在本次ajax教程中提供該asp文件的源碼．
其實在你學會了怎么使用ajax添加數據時，想實現修改數據對你來說已經很容易了！費話不說先看前端的JavaScript代碼和本次的ajax實例效果！
代碼如下:
<html>
<head>
<title>ajax修改數據</title>
<style>
body{
font-size:12px;
}
</style>
</head>
<body>
<p>同時在線測試的人很多，有時可能會出現并發修改現象．</p>
<hr/>
<table border="1">
<thead><tr><td>數據編號</td><td>數據內容</td></tr></thead>
<tbody id="a"><!--用于存放內容的tbody-->
</tbody>
</table>
輸入編號：<input id="data_id" type="text" /><br/>
修改內容：<input id="data_content" type="text" /><br/>
<input type="button" value="確定修改" onclick="Edit_Data()"/>
<span id="msgaes" style="color:red"></span>
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中創建xmlhttpRequest,適用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循環創建基于IE瀏覽器的xmlhttp.結束
//如果非IE瀏覽器，則創建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//讀取數據函數
function Read(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變量．
ajax.open("post","Edit_Data.asp?action=read",true);//設置請求方式，請求的網頁，url的action參數為read，異步請求
ajax.onreadystatechange = function(){//你也可以這里指定一個已經寫好的函數名稱
if(ajax.readyState == 4){//數據返回成功
if(ajax.status == 200){//http請求狀態碼返回ok
var xmlData = ajax.responseXML;//以xml格式接收返回的數據，并保存在xmlData變量里
var list = xmlData.getElementsByTagName("list");//在返回的數據里，獲取所有list標簽
if(list.length!=0){
var t = document.getElementById("a");//獲取展示數據的表格
for(var i=0;i<list.length;i++){
var tr = t.insertRow();//有幾個list就為表格增加幾行．
for(var k=0;k<list[i].childNodes.length;k++){ //遍歷每個list中的子元素
var td = tr.insertCell();//每個list中有幾個子元素，便為一行增加幾列
td.innerHTML = list[i].childNodes[k].firstChild.nodeValue;//在單元格內寫入第i個list的第k個子元素中的文本內容
}
