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

1.使用XMLHttPRequest控件异步获取数据

2009-09-21 22:27 661 查看

知识点：

①根据浏览器的不同实例化XMLHttpRequest对象；

②发送一个异步请求的步骤；

③如何处理每次回调的函数；

完整代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="01_XmlHttpRequest.aspx.cs" Inherits="XmlHttpRequest" %>
<!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 id="Head1" runat="server">
<title>ASP.NET AJAX In Action - XmlHttpRequest</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="results">Loading...<br />
<!--这里用按钮触发异步回调事件-->
</span><input type="button"  value="触发异步调用，调用Welcome.htm的内容" onclick="sendRequest('Welcome.htm');" />
</div>
</form>
<script type="text/javascript">
<!--
var xmlHttp = null;
window.onload = function()
{
loadXmlHttp();
//sendRequest("Welcome.htm");
}

//【1】根据浏览器版本实例化xmlHttp对象
function loadXmlHttp()
{
if (window.XMLHttpRequest)
{
// IE7, Mozilla, Safari, Opera等浏览器
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.x and 6版本的微软浏览器
}
catch (e){}
}
}
//【2】发送一个异步请求的步骤；
function sendRequest(url)
{
if (xmlHttp)
{
// ①打开异步连接
xmlHttp.open("GET", url, true); // true = async

// ②指定回调函数
xmlHttp.onreadystatechange = onCallback;

// [可选]Specify form data in request body
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

// ③发送异步请求
xmlHttp.send(null);
}
}
//【3】每次异步请求的就绪状态改变时都会调用的回调函数；
function onCallback()
{
// ①查看完成了的就绪状态
if (xmlHttp.readyState == 4)
{
// ②状态码200表示成功，404表示没有文件错误
if (xmlHttp.status == 200)
{
// ③显示请求结果
var r = document.getElementById('results');
r.innerHTML = xmlHttp.responseText;
}
else
{
alert('Error: ' + xmlHttp.status);
}
}
}
// --></script>
</body>
</html>

welcome.htm页面代码：

<!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>
<title>Welcome</title>
</head>
<body>
<div>Welcome to ASP.NET AJAX In Action!</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航