當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Ajax(3)--DOM操作HTML 你忘记了吗?

發布時間：2023/12/20 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 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">

?? ???????????????????????????????????????

?? ???????????????????????????????????????<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>

?? ???????????????????????????????????????????????????????????????????????????會員價: 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 你忘记了吗?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。