XMLHttpRequest Ajax 实例简介
2009-06-06 11:25
309 查看
一、XMLHttpRequest 对象的方法与属性
二、使用XMLHttpRequest 实现ajax效果
这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！
客户端myAjax.html代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>xmlhttprequest ajax demo</title>
</head>
<body>
<div id="myTime"></div>
<input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
</body>
</html>服务端ajaxServer.aspx代码
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 on 2007-04-15 09:23 chy710 阅读(12855) 评论(23) 编辑 收藏 网摘 所属分类: Ajax
我把你的代码直接拷上去，最后XMLHTTPREQUEST返回的是整个页面的HTML代码 并没有返回时间
你的效果怎么做的啊
回复 引用
#2楼 211.69.161.* 2008-03-29 16:28 xudi [未注册用户]
程序有点问题
问题处在 <input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
改为<input id="Button1" type="button" value="Get Time" onclick ="creatReq('ajaxServer.aspx');"/>
例子很不错
回复 引用
#3楼 141.55.104.* 2008-05-17 22:07 wang_deu [未注册用户]
为什么我的 req.readystate 这个值总是0 呢，
是不是我的 .net 环境 需要什么设置啊。
这个问题困扰我好久了，不能继续学习 Ajax了
回复 引用
#4楼 [楼主] 2008-05-20 09:24 chy710
@wang_deu
请求的状态未初始化,检查一下代码：
myAjax.html
ajaxServer.aspx 有后端cs代码
客户端myAjax.html访问服务端ajaxServer.aspx，返回数据，再更新html页面，整个过程就是这样的．
回复 引用 查看
#5楼 202.173.8.* 2008-06-22 01:51 闲聊 [未注册用户]
例子没错!真的!不过在CS代码里面加上Response.End();就能显示了!
回复 引用
#6楼 218.4.63.* 2008-06-23 10:05 王志伟1 [未注册用户]
谢谢楼主，将你的代码稍微修改了一下，可以指定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>
回复 引用
#7楼 60.6.224.* 2008-07-02 17:38 angel_tw [未注册用户]
在IE7和FF无反应
回复 引用
#8楼 219.235.232.* 2008-07-07 11:55 bit_kevin [未注册用户]
req.readystate 应该为 req.readyState ‘s’为大写。
回复 引用
#9楼 220.248.74.* 2008-07-14 16:31 xchbs [未注册用户]
相当的不错
回复 引用
#10楼 2008-07-19 22:12 FEIM Studios
哈哈哈哈，好代码。
回复 引用 查看
#11楼 116.26.22.* 2008-08-26 14:22 phy [未注册用户]
@xudi
此人错误……
回复 引用
#12楼 117.89.160.* 2008-12-16 14:09 lltse [未注册用户]
--引用--------------------------------------------------
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");
改成这几个试试看呢
回复 引用
#13楼 121.33.190.* 2009-03-11 15:22 大龙 [未注册用户]
这样也叫改吗？
回复 引用
#14楼 121.33.190.* 2009-03-11 15:23 大龙 [未注册用户]
--引用--------------------------------------------------
王志伟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>
--------------------------------------------------------
回复 引用
#15楼 121.33.190.* 2009-03-11 15:24 大龙 [未注册用户]
--引用--------------------------------------------------
angel_tw: 在IE7和FF无反应
--------------------------------------------------------
这样也叫改吗?
回复 引用
#16楼 221.237.196.* 2009-03-17 22:56 Morpheuszeng [未注册用户]
req.readystate 应该为 req.readyState ‘s’为大写。
这个改了就对了。但是我发现怎么时间老是被缓存了呢？
回复 引用
#17楼 218.56.22.* 2009-04-09 14:23 阿昌 [未注册用户]
博主的代码只有一个不当之处，一共十六层的朋友们怎么没有一个指出来呢
对象req的send方法的参数是url而非null ，所以req.send(null)应改为req.send(url)。
另：readystate中的s大小写无所谓，都行。已测试通过
学习C# asp.net的朋友可到我的博客http://blog.sina.com.cn/alittleadrop去看看，也对大家有所帮助
回复 引用
#18楼 58.240.233.* 2009-05-13 16:37 黄海滨 [未注册用户]
17楼的正解啊，困扰了我好几个小时。。。send里面原来要改成url。怪不得我只能回调一次，第二次open里的就不执行了
回复 引用
#19楼 123.6.235.* 2009-05-20 11:41 8055 [未注册用户]
--引用--------------------------------------------------
黄海滨: 17楼的正解啊，困扰了我好几个小时。。。send里面原来要改成url。怪不得我只能回调一次，第二次open里的就不执行了
--------------------------------------------------------
时间总是缓存，为什么呢？
回复 引用
#20楼 60.191.167.* 2009-05-21 12:42 奇怪 [未注册用户]
前面19层的朋友，
你们没一个人出现readystate 的值为undefined吗？
回复 引用
#21楼 60.191.167.* 2009-05-21 12:50 奇怪 [未注册用户]
收回刚才的话，
17楼的朋友，被你骗了，
绕了一大圈子，发现readyState,S还是要大写，
否则readyState的值为undefined！
回复 引用
#22楼 2009-06-03 15:52 Byrd
怎么调啊，服务器端ajaxServer.aspx与myAjax.html分别如何打开啊
回复 引用 查看
| 方 法 | 描 述 |
| 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 请求服务端获取当前系统时间，实现异步交互！
客户端myAjax.html代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>xmlhttprequest ajax demo</title>
</head>
<body>
<div id="myTime"></div>
<input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
</body>
</html>服务端ajaxServer.aspx代码
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 on 2007-04-15 09:23 chy710 阅读(12855) 评论(23) 编辑 收藏 网摘 所属分类: Ajax
Feedback
#1楼 210.43.107.* 2007-10-25 16:44 LGQ [未注册用户]我把你的代码直接拷上去，最后XMLHTTPREQUEST返回的是整个页面的HTML代码 并没有返回时间
你的效果怎么做的啊
回复 引用
#2楼 211.69.161.* 2008-03-29 16:28 xudi [未注册用户]
程序有点问题
问题处在 <input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/>
改为<input id="Button1" type="button" value="Get Time" onclick ="creatReq('ajaxServer.aspx');"/>
例子很不错
回复 引用
#3楼 141.55.104.* 2008-05-17 22:07 wang_deu [未注册用户]
为什么我的 req.readystate 这个值总是0 呢，
是不是我的 .net 环境 需要什么设置啊。
这个问题困扰我好久了，不能继续学习 Ajax了
回复 引用
#4楼 [楼主] 2008-05-20 09:24 chy710
@wang_deu
请求的状态未初始化,检查一下代码：
myAjax.html
ajaxServer.aspx 有后端cs代码
客户端myAjax.html访问服务端ajaxServer.aspx，返回数据，再更新html页面，整个过程就是这样的．
回复 引用 查看
#5楼 202.173.8.* 2008-06-22 01:51 闲聊 [未注册用户]
例子没错!真的!不过在CS代码里面加上Response.End();就能显示了!
回复 引用
#6楼 218.4.63.* 2008-06-23 10:05 王志伟1 [未注册用户]
谢谢楼主，将你的代码稍微修改了一下，可以指定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>
回复 引用
#7楼 60.6.224.* 2008-07-02 17:38 angel_tw [未注册用户]
在IE7和FF无反应
回复 引用
#8楼 219.235.232.* 2008-07-07 11:55 bit_kevin [未注册用户]
req.readystate 应该为 req.readyState ‘s’为大写。
回复 引用
#9楼 220.248.74.* 2008-07-14 16:31 xchbs [未注册用户]
相当的不错
回复 引用
#10楼 2008-07-19 22:12 FEIM Studios
哈哈哈哈，好代码。
回复 引用 查看
#11楼 116.26.22.* 2008-08-26 14:22 phy [未注册用户]
@xudi
此人错误……
回复 引用
#12楼 117.89.160.* 2008-12-16 14:09 lltse [未注册用户]
--引用--------------------------------------------------
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");
改成这几个试试看呢
回复 引用
#13楼 121.33.190.* 2009-03-11 15:22 大龙 [未注册用户]
这样也叫改吗？
回复 引用
#14楼 121.33.190.* 2009-03-11 15:23 大龙 [未注册用户]
--引用--------------------------------------------------
王志伟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>
--------------------------------------------------------
回复 引用
#15楼 121.33.190.* 2009-03-11 15:24 大龙 [未注册用户]
--引用--------------------------------------------------
angel_tw: 在IE7和FF无反应
--------------------------------------------------------
这样也叫改吗?
回复 引用
#16楼 221.237.196.* 2009-03-17 22:56 Morpheuszeng [未注册用户]
req.readystate 应该为 req.readyState ‘s’为大写。
这个改了就对了。但是我发现怎么时间老是被缓存了呢？
回复 引用
#17楼 218.56.22.* 2009-04-09 14:23 阿昌 [未注册用户]
博主的代码只有一个不当之处，一共十六层的朋友们怎么没有一个指出来呢
对象req的send方法的参数是url而非null ，所以req.send(null)应改为req.send(url)。
另：readystate中的s大小写无所谓，都行。已测试通过
学习C# asp.net的朋友可到我的博客http://blog.sina.com.cn/alittleadrop去看看，也对大家有所帮助
回复 引用
#18楼 58.240.233.* 2009-05-13 16:37 黄海滨 [未注册用户]
17楼的正解啊，困扰了我好几个小时。。。send里面原来要改成url。怪不得我只能回调一次，第二次open里的就不执行了
回复 引用
#19楼 123.6.235.* 2009-05-20 11:41 8055 [未注册用户]
--引用--------------------------------------------------
黄海滨: 17楼的正解啊，困扰了我好几个小时。。。send里面原来要改成url。怪不得我只能回调一次，第二次open里的就不执行了
--------------------------------------------------------
时间总是缓存，为什么呢？
回复 引用
#20楼 60.191.167.* 2009-05-21 12:42 奇怪 [未注册用户]
前面19层的朋友，
你们没一个人出现readystate 的值为undefined吗？
回复 引用
#21楼 60.191.167.* 2009-05-21 12:50 奇怪 [未注册用户]
收回刚才的话，
17楼的朋友，被你骗了，
绕了一大圈子，发现readyState,S还是要大写，
否则readyState的值为undefined！
回复 引用
#22楼 2009-06-03 15:52 Byrd
怎么调啊，服务器端ajaxServer.aspx与myAjax.html分别如何打开啊
回复 引用 查看
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- (收藏)XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介 （用此方法可实现JS与SQL连接）
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- XMLHttpRequest Ajax 实例简介
- ajax的简单实例 XMLHttpRequest对象
- AJAX创建XMLHttpRequest对象实例
- C# XMLHttpRequest对象—Ajax实例
- php ajax XMLHttpRequest POST实例代码
- AJAX 简介 及 XMLHttpRequest对象的使用方法
- XMLHttpRequest实现Ajax效果实例
- AJAX中创建XMLHttpRequest对象实例
- Web2.0:AJAX的使用(XMLHttpRequest简介)