Ajax(3)--DOM操作HTML 你忘记了吗?
對應的HTML頁面程序的代碼如下所示。在該程序中除了與Ajax相關的程序基本框架之外，讀者需要特別關注一下使用DOM操作HTML文檔中對應元素的方法。
源程序名稱：main.htm
<html>
????? <head>
??????????? <title>shopping online</title>
??????????? <meta http-equiv="content-type" content="text/html; charset=gb2312">
??????????? <link href="images/css.css" type="text/css" rel="stylesheet">
????? </head>
????? <script type="text/javascript">???????
??? var datadiv;
??? var datatablebody;
??? var curelement;
?
????? var xmlhttpreq = false;
????? //創建xmlhttprequest對象??????
??? function createxmlhttprequest() {
??????????? if(window.xmlhttprequest) { //mozilla 瀏覽器
????????????????? xmlhttpreq = new xmlhttprequest();
??????????? }
??????????? else if (window.activexobject) { // IE瀏覽器
????????????????? try {
??????????????????????? xmlhttpreq = new activexobject("msxml2.xmlhttp");
?????? ???????????} catch (e) {
???????????????????????? try {
?????????????????????????????? xmlhttpreq = new activexobject("microsoft.xmlhttp");
??????????????????????? } catch (e) {}
????????????????? }
??????????? }
????? }
????? //發送請求函數
????? function getdetail(element) {
????? ?????datatablebody = document.getelementbyid("databody");???????????
??????? ???datadiv = document.getelementbyid("popup");
??????????? createxmlhttprequest();
????? ?????curelement = element;
????? ?????var url = "tipservlet?key=" + escape(element.id);
????? ???????xmlhttpreq.open("get", url, true);
????? ???????xmlhttpreq.onreadystatechange = processresponse;//指定響應函數
????? ???????xmlhttpreq.send(null);? // 發送請求
????? }
????? // 處理返回信息函數
??? ??function processresponse() {
??? ??if (xmlhttpreq.readystate == 4) { // 判斷對象狀態
??????? ?????if (xmlhttpreq.status == 200) { // 信息已經成功返回，開始處理信息
???????????? ????????????????setdata(xmlhttpreq.responsexml);
????????? ???????} else { //頁面不正常
?????????????? ?????????window.alert("您所請求的頁面有異常。");
??????????? ?????}
??????? ??}
??? }
??? // 顯示提示框
??? function setdata(data) {???????????
???? ????cleardata();
????? ???setoffsets();
?????? ??var content = data.getelementsbytagname("content")[0].firstchild.data;
??????? ?var row = createrow(content);???????????
??????? ?datatablebody.appendchild(row);
?? ?}
??? //生成表格內容行
?? ?function createrow(data) {???????????
?????? var row, cell, txtnode;
?????? row = document.createelement("tr");
?????? cell = document.createelement("td");
?????? cell.setattribute("bgcolor", "#fffafa");
?????? cell.setattribute("border", "0");??????????????????????????
?????? txtnode = document.createtextnode(data);
?????? cell.appendchild(txtnode);
?????? row.appendchild(cell);
?????? return row;?
?? ?}
?? ?//設置顯示位置???????????????
?? ?function setoffsets() {
?????? datadiv.style.border = "black 1px solid";
?????? var top = 0;
?????? while(curelement) {
????????? top += curelement["offsettop"];
????????? curelement = curelement.offsetparent;
?????? }
?????? datadiv.style.left = 50 + "px";
?????? datadiv.style.top = top + "px";
?? }
?
?? ?// 清除提示框
?? ?function cleardata() {???????????
?????? var ind = datatablebody.childnodes.length;???????????
?????? for (var i = ind - 1; i >= 0 ; i--) {
??????? ?????datatablebody.removechild(datatablebody.childnodes[i]);??????
?????? }
?????? datadiv.style.border = "none";
?? ??}
</script>
?
?? ?<body leftmargin="0" topmargin="0">
?? ??????<table cellspacing="0" cellpadding="0" width="778" align="center" border="0">
?? ????????????<tbody>
?? ??????????????????<tr>
?? ????????????????????????<td height="10"></td>
?? ??????????????????</tr>
?? ???????????????</tbody>
?? ?????????</table>
?? ?????????<table height="148" cellspacing="0" cellpadding="0" width="778" align="center" border="0">
?? ???????????????<tbody>
?? ?????????????????????<tr valign="top">
?? ???????????????????????????<td width="236">
?? ?????????????????????????????????<table width="375" height="340">
?? ???????????????????????????????????????<!--dwlayouttable-->
?? ???????????????????????????????????????<tbody>
?? ?????????????????????????????????????????????<tr>
?? ????????????????????????????????????????????????????<td width="348" height="1">
?? ????????????????????????????????????????????????????</td>
?? ????????????????????????????????????????????????????<td height="1" width="29"></td>
?? ?????????????????????????????????????????????</tr>
?? ?????????????????????????????????????????????<tr>
?? ????????????????????????????????????????????????????<td height="13" width="348">
?? ????????????????????????????????????????????????????<table id="autonumber1" style="border- collapse: collapse" bordercolor="#111111" height="20" cellspacing="0" cellpadding="0" width="151" background="images/fu.gif" border="0">
?? ??????????????????????????????????????????????????????????<tbody>
?? ????????????????????????????????????????????????????????????????<tr>
?? ?????????????????????????????????????????????????????????????????????<td align="center" width="82">
?? ???????????????????????????????????????????????????????????????????????????<b>精品推薦</b>
?? ?????????????????????????????????????????????????????????????????????</td>
?? ?????????????????????????????????????????????????????????????????????<td align="center">
?? ?????????????????????????????????????????????????????????????????????</td>
?? ????????????????????????????????????????????????????????????????</tr>
?? ??????????????????????????????????????????????????????????</tbody>
?? ????????????????????????????????????????????????????</table>
?? ?????????????????????????????????????????????</td>
?? ?????????????????????????????????????????????<td height="13" width="29">
?? ?????????????????????????????????????????????</td>
?? ???????????????????????????????????????</tr>
?? ???????????????????????????????????????<tr>
?? ?????????????????????????????????????????????<td valign="top" height="328" width="348">
?? ???????????????????????????????????????????????????<table cellspacing="0" cellpadding="0" width="103%" border="0">
?? ??????????????????????????????????????????????????????????<tbody>
?? ????????????????????????????????????????????????????????????????<tr>
?? ?????????????????????????????????????????????????????????????????????<td width="50%">
?? ???????????????????????????????????????????????????????????????????????????<img id="1" onm- ouseover="getdetail(this);" οnmοuseοut="cleardata();" src="images/ibmt43bb4.jpg" vspace="6" border="0" alt="">
?? ???????????????????????????????????????????????????????????????????????????<a><b>
?? ???????????????????????????????????????????????????????????????????????????<br>
?? ?????????????????????????????????????????????????????????????????????</td>
?? ?????????????????????????????????????????????????????????????????????<td width="50%">
?? ???????????????????????????????????????????????????????????????????????????<br>
?? ???????????????????????????????????????????????????????????????????????????商品名稱:
?? ???????????????????????????????????????????????????????????????????????????ibm-t43bb
?? ???????????????????????????????????????????????????????????????????????????<br>
?? ???????????????????????????????????????????????????????????????????????????會員價:2500元
?? ???????????????????????????????????????????????????????????????????????????<br>
?? ?????????????????????????????????????????????????????????????????????</td>
?? ????????????????????????????????????????????????????????????????</tr>
?? ????????????????????????????????????????????????????????????????<tr>
?? ?????????????????????????????????????????????????????????????????????<td width="50%">
?? ???????????????????????????????????????????????????????????????????????????<img id="2" onm- ouseover="getdetail(this);" οnmοuseοut="cleardata();" src="images/hpnc4200.jpg" vspace="6" border="0" alt="">
?? ?????????????????????????????????????????????????????????????????????</td>
?? ?????????????????????????????????????????????????????????????????????<td width="50%">
?? ???????????????????????????????????????????????????????????????????????????<br>
?? ???????????????????????????????????????????????????????????????????????????商品名稱:
?? ???????????????????????????????????????????????????????????????????????????hp-nc4200
?? ???????????????????????????????????????????????????????????????????????????<br>
?? ???????????????????????????????????????????????????????????????????????????<br>
?? ???????????????????????????????????????????????????????????????????????????會員價: 1150元
?? ???????????????????????????????????????????????????????????????????????????<br>
?? ?????????????????????????????????????????????????????????????????????</td>
? ?????????????????????????????????????????????????????????????????</tr>
?? ????????????????????????????????????????????????????????????????……
??????????????????????? <tr>
????????????????????????????? <td valign="top" colspan="4" height="16" width="776">
? ????????????????????????????</td>
??????????????????????? </tr>
????????????????? </tbody>
??????????? </table>
??????????? <div style="position:absolute;" id="popup">
????????????????? <table bgcolor="#fffafa" border="0" cellspacing="2" cellpadding="2" />
??????????????????????? <tbody id="databody">
??????????????????????? </tbody>
????????????????? </table>
??????????? </div>
????? </body>
</html>
轉載于:https://www.cnblogs.com/zhengxi/archive/2010/06/10/1755285.html
總結
以上是生活随笔為你收集整理的Ajax(3)--DOM操作HTML 你忘记了吗?的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MQ延迟队列实现延迟消息
- 下一篇： 可怜的TMac