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

对应的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

Ajax(3)--DOM操作HTML 你忘记了吗?相关推荐

MV* 框架与 DOM操作为主 JS库的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库与 MV* 框架的对比案例(MV* 框架与 DOM操作 JS库实例对比) 购物车页面 ...
java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
jQuery的DOM操作
jQuery的DOM操作前期:http://blog.csdn.net/goodshot/article/details/20202019 1 , 创建元素节点传统的javascript方法,创建 ...
ajax与DOM的使用,AJAX和DOM的运行经验
AJAX和DOM的运行经验更新时间:2007年03月07日 00:00:00 作者: 被AJAX中DOM的操作郁闷了好几天,今天总算搞明白了,自学就是苦啊,苦的一把鼻涕一把泪的, 把教训些出来, ...
DOM操作 append prependTo after before
通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数 ...
JavaScript和jQuery的DOM操作
1.创建元素节点传统的javascript方法,创建元素节点程序代码 var a = document.createElement("p"); jQuery中创建节点的方法是 ...
Django的Ajax加额外操作
---恢复内容开始--- choice参数这个参数能够帮我们在数据库中存储数字,然后取出的时候,可以将其转换成相对应的字符,为什么这样呢,因为数字的存储所占的空间远小于字符的,这样能够节省资源. 用 ...
java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...

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

Ajax(3)--DOM操作HTML 你忘记了吗?相关推荐

最新文章

热门文章