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

最新推荐文章于 2025-09-09 08:37:13 发布

转载最新推荐文章于 2025-09-09 08:37:13 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhengxi/archive/2010/06/10/1755285.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Ajax技术实现在鼠标悬停时显示商品详细信息的HTML页面示例。该示例通过DOM操作来更新HTML元素，并根据不同浏览器创建对应的XMLHttpRequest对象以发送请求获取商品详情。

对应的HTML页面程序的代码如下所示。在该程序中除了与Ajax相关的程序基本框架之外，读者需要特别关注一下使用DOM操作HTML文档中对应元素的方法。

源程序名称：main.htm

<html>

<head>

<title>shopping online</title>

</head>

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>

<tbody>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tbody>

<tr>

</td>

</tr>

<tr>

<tbody>

<tr>

</td>

</td>

</tr>

</tbody>

</table>

</td>

</td>

</tr>

<tr>

<tbody>

<tr>

<a><b>

<br>

</td>

<br>

商品名称:
ibm-t43bb

<br>

会员价:2500元

<br>

</td>

</tr>

<tr>

</td>

<br>

商品名称:
hp-nc4200

<br>

会员价: 1150元

<br>

</td>

</tr>

……

<tr>

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