您的位置：首页 > 理论基础 > 计算机网络

Ajax基础(XMLHttpRequest对象)回顾

2007-08-13 12:31 591 查看
今天无聊,又回过头来写写 XMLHttpRequest对象直接访问Server.

js代码

var XHR,XmlDoc;

//创建XHR
function CreateXHR()
{
if(window.XMLHttpRequest)
{
//非IE
XHR = new window.XMLHttpRequest();
}
else if(window.ActiveXObject)
{
//IE
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function CreateTalbeData()
{
CreateXHR();
XHR.onreadystatechange = GetCreateTalbeData;
XHR.open("GET","Ajax.xml",true);
XHR.send(null);
}

function GetCreateTalbeData()
{
if(XHR.readystate == 4)
{
if(XHR.status == 200)
{
XmlDoc = XHR.responseXml;//XML Dom

var Users = XmlDoc.getElementsByTagName("User");

var Result = "<table width='100%' border='1' cellspacing='2' cellpadding='2'>";
for(var i = 0 ;i < Users.length;i++)
{
Result + "<tr>";
var u = Users[i];
var UserName = u.getElementsByTagName("UserName")[0].firstChild.nodeValue;
var Age = u.getElementsByTagName("UserName")[0].getAttribute("age");
var Sex = u.getElementsByTagName("Sex")[0].firstChild.nodeValue;
var Telphone = u.getElementsByTagName("Telphone")[0].firstChild.nodeValue;

Result += "<td>" + UserName + "</td>";
Result += "<td>" + Sex + "</td>";
Result += "<td>" + Telphone + "</td>";

Result += "</tr>";
}

Result += "</table>";

document.all.divS.innerHTML = Result;

//此处应该用脚本创建元素构造,我偷懒了,呵呵！

}
}
}

页面文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax.aspx.cs" Inherits="Ajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="Scripts/Ajax.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button3" type="button" value="创建表格" onclick="CreateTalbeData();" />
<div id="divS" style="background-color:Lime">
</div>
</div>
</form>
</body>
</html>

Ajax.xml

<?xml version="1.0" encoding="utf-8" ?>
<Users>
<User>
<UserName> 刘斌</UserName>
<Sex>男</Sex>
<Telphone>13755038342</Telphone>
</User>
<User>
<UserName >张三</UserName>
<Sex>女</Sex>
<Telphone>13789929292</Telphone>
</User>
</Users>

虽然有很多Ajax Framework,但偶儿写写最原始的东西,也会有一定的收获。我的QQ：58690327,欢迎加我一起学习Ajax.[验证 Ajax讨论 ],用AjaxPro做的一个地图 www.3dcs.cn 请大家指教！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航