Ajax修改數(shù)據(jù)即時顯示篇實現(xiàn)代碼
2024-09-01 08:29:14
供稿：網(wǎng)友
我們這次要請求的服務端網(wǎng)頁是：Edit_Data.Asp 待會我會在本次ajax教程中提供該asp文件的源碼．
其實在你學會了怎么使用ajax添加數(shù)據(jù)時，想實現(xiàn)修改數(shù)據(jù)對你來說已經(jīng)很容易了！費話不說先看前端的JavaScript代碼和本次的ajax實例效果！
代碼如下:
<html>
<head>
<title>ajax修改數(shù)據(jù)</title>
<style>
body{
font-size:12px;
}
</style>
</head>
<body>
<p>同時在線測試的人很多，有時可能會出現(xiàn)并發(fā)修改現(xiàn)象．</p>
<hr/>
<table border="1">
<thead><tr><td>數(shù)據(jù)編號</td><td>數(shù)據(jù)內容</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中創(chuàng)建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;
}
} //循環(huán)創(chuàng)建基于IE瀏覽器的xmlhttp.結束
//如果非IE瀏覽器，則創(chuàng)建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//讀取數(shù)據(jù)函數(shù)
function Read(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變量．
ajax.open("post","Edit_Data.asp?action=read",true);//設置請求方式，請求的網(wǎng)頁，url的action參數(shù)為read，異步請求
ajax.onreadystatechange = function(){//你也可以這里指定一個已經(jīng)寫好的函數(shù)名稱
if(ajax.readyState == 4){//數(shù)據(jù)返回成功
if(ajax.status == 200){//http請求狀態(tài)碼返回ok
var xmlData = ajax.responseXML;//以xml格式接收返回的數(shù)據(jù)，并保存在xmlData變量里
var list = xmlData.getElementsByTagName("list");//在返回的數(shù)據(jù)里，獲取所有l(wèi)ist標簽
if(list.length!=0){
var t = document.getElementById("a");//獲取展示數(shù)據(jù)的表格
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個子元素中的文本內容
}
