一、XMLHttpRequest 对象的方法与属性
|
方 法
|
描 述
|
|
abort()
|
停止当前请求
|
|
getAllResponseHeaders()
|
把HTTP请求的所有响应首部作为键/值对返回
|
|
getResponseHeader("header")
|
返回指定首部的串值
|
|
open("method", "url")
|
建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
|
|
send(content)
|
向服务器发送请求
|
|
setRequestHeader("header", "value")
|
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
|
|
属 性
|
描 述
|
|
onreadystatechange
|
每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
|
|
readyState
|
请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
|
|
responseText
|
服务器的响应，表示为一个串
|
|
responseXML
|
服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
|
|
status
|
服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
|
|
statusText
|
HTTP状态码的相应文本（OK或Not Found（未找到）等等）
|
二、使用XMLHttpRequest 实现ajax效果
这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！
客户端myAjax.html代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>xmlhttprequest ajax demo</title>
<script type ="text/javascript" language ="javascript" >
var req; //定义变量，用来创建xmlhttprequest对象
function creatReq() // 创建xmlhttprequest,ajax开始
{
var url="ajaxServer.aspx"; //要请求的服务端地址
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
req=new ActiveXObject("Microsoft.XMLHttp");
}
if(req) //成功创建xmlhttprequest
{
req.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
req.onreadystatechange = callback; //指定回调函数
req.send(null); //发送请求
}
}
function callback() //回调函数，对服务端的响应处理，监视response状态
{
if(req.readystate==4) //请求状态为4表示成功
{
if(req.status==200) //http状态200表示OK
{
Dispaly(); //所有状态成功，执行此函数，显示数据
}
else //http返回状态失败
{
alert("服务端返回状态" + req.statusText);
}
}
else //请求状态还没有成功，页面等待
{
document .getElementById ("myTime").innerHTML ="数据加载中";
}
}
function Dispaly() //接受服务端返回的数据，对其进行显示
{
document .getElementById ("myTime").innerHTML =req.responseText;
}
</script>
</head>
<body>
<div id="myTime"></div>
<input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
</body>
</html>服务端ajaxServer.aspx代码 (不需要HTML代码,只需服务端处理返回数据,也可用ashx文件来处理)
public partial class ajaxServer : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000); //为了看到ajax效果，将当前线程延时1000毫秒
Response.Write(DateTime .Now .ToString ()); //输出当前时间
}
}
运行效果：
posted @ 2007-04-15 09:23
chy710 阅读(32054)
评论(26) 编辑 收藏
发表评论
我把你的代码直接拷上去，最后XMLHTTPREQUEST返回的是整个页面的HTML代码 并没有返回时间
你的效果怎么做的啊
程序有点问题
问题处在 <input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
改为<input id="Button1" type="button" value="Get Time" onclick ="creatReq('ajaxServer.aspx');"/>
例子很不错
为什么我的 req.readystate 这个值总是0 呢，
是不是我的 .net 环境 需要什么设置啊。
这个问题困扰我好久了，不能继续学习 Ajax了
@wang_deu
请求的状态未初始化,检查一下代码：
myAjax.html
ajaxServer.aspx 有后端cs代码
客户端myAjax.html访问服务端ajaxServer.aspx，返回数据，再更新html页面，整个过程就是这样的．
例子没错!真的!不过在CS代码里面加上Response.End();就能显示了!
谢谢楼主，将你的代码稍微修改了一下，可以指定aspx页面和显示的div
调用方法 onclick ="creatReq('receive.aspx','div1');"
<script type ="text/javascript" language ="javascript" >
var req; //定义变量，用来创建xmlhttprequest对象
var divName;
function creatReq(url,div) // 创建xmlhttprequest,ajax开始
{
divName=div;
if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE浏览器用activexobject对象创建
{
req=new ActiveXObject("Microsoft.XMLHttp");
}
if(req) //成功创建xmlhttprequest
{
req.open("Post",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
req.onreadystatechange = callback; //指定回调函数
req.send(null); //发送请求
}
}
function callback() //回调函数，对服务端的响应处理，监视response状态
{
if(req.readystate==4) //请求状态为4表示成功
{
if(req.status==200) //http状态200表示OK
{
Dispaly(); //所有状态成功，执行此函数，显示数据
}
else //http返回状态失败
{
alert("服务端返回状态" + req.statusText);
}
}
else //请求状态还没有成功，页面等待
{
document .getElementById (divName).innerHTML ="数据加载中";
}
}
function Dispaly() //接受服务端返回的数据，对其进行显示
{
document .getElementById (divName).innerHTML =req.responseText;
}
</script>
req.readystate 应该为 req.readyState ‘s’为大写。
--引用--------------------------------------------------
angel_tw: 在IE7和FF无反应
--------------------------------------------------------
Microsoft.XMLHttp,是这个的问题。我遇到过在ie7里面没反应后来改成
Msxml2.XMLHTTP就好了。
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
改成这几个试试看呢
--引用--------------------------------------------------
王志伟1: 谢谢楼主，将你的代码稍微修改了一下，可以指定aspx页面和显示的div<br>调用方法 onclick ="creatReq('receive.aspx','div1');" <br> <br> <script type ="text/javascript" language ="javascript" ><br> var req; //定义变量，用来创建xmlhttprequest对象<br> var divName;<br> function creatReq(url,div) // 创建xmlhttprequest,ajax开始<br> { <br> divName=div; <br> if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建<br> {<br> req=new XMLHttpRequest();<br> }<br> else if(window.ActiveXObject) //IE浏览器用activexobject对象创建<br> {<br> req=new ActiveXObject("Microsoft.XMLHttp");<br> } <br> if(req) //成功创建xmlhttprequest<br> {<br> req.open("Post",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)<br> req.onreadystatechange = callback; //指定回调函数<br> req.send(null); //发送请求<br> }<br> } <br> function callback() //回调函数，对服务端的响应处理，监视response状态<br> {<br> if(req.readystate==4) //请求状态为4表示成功<br> {<br> if(req.status==200) //http状态200表示OK<br> {<br> Dispaly(); //所有状态成功，执行此函数，显示数据 <br> }<br> else //http返回状态失败<br> {<br> alert("服务端返回状态" + req.statusText);<br> }<br> }<br> else //请求状态还没有成功，页面等待<br> {<br> document .getElementById (divName).innerHTML ="数据加载中";<br> }<br> } <br> function Dispaly() //接受服务端返回的数据，对其进行显示<br> {<br> document .getElementById (divName).innerHTML =req.responseText;<br> } <br> </script>
--------------------------------------------------------
--引用--------------------------------------------------
angel_tw: 在IE7和FF无反应
--------------------------------------------------------
这样也叫改吗?
req.readystate 应该为 req.readyState ‘s’为大写。
这个改了就对了。但是我发现怎么时间老是被缓存了呢？
博主的代码只有一个不当之处，一共十六层的朋友们怎么没有一个指出来呢
对象req的send方法的参数是url而非null ，所以req.send(null)应改为req.send(url)。
另：readystate中的s大小写无所谓，都行。已测试通过
学习C# asp.net的朋友可到我的博客http://blog.sina.com.cn/alittleadrop去看看，也对大家有所帮助
17楼的正解啊，困扰了我好几个小时。。。send里面原来要改成url。怪不得我只能回调一次，第二次open里的就不执行了
--引用--------------------------------------------------
黄海滨: 17楼的正解啊，困扰了我好几个小时。。。send里面原来要改成url。怪不得我只能回调一次，第二次open里的就不执行了
--------------------------------------------------------
时间总是缓存，为什么呢？
前面19层的朋友，
你们没一个人出现readystate 的值为undefined吗？
收回刚才的话，
17楼的朋友，被你骗了，
绕了一大圈子，发现readyState,S还是要大写，
否则readyState的值为undefined！
怎么调啊，服务器端ajaxServer.aspx与myAjax.html分别如何打开啊
.....req.send(url); // 加url
.... if(req.readyState==4) .... //变大写
... .. Response.End(); ......//加end()
恩，不错的代码，清晰明了，但不知道获取其他网站获取数据怎么弄呵?