AJAX 学习笔记[一] 简单的异步通信示例
2011-08-18 18:01
609 查看
客户端:向服务器发出一个空请求。
9-1.html 代码如下:
<html> |
<head> |
<title>XMLHttpRequest</title> |
<script language="javascript"> |
var xmlHttp; |
function createXMLHttpRequest(){ |
if(window.ActiveXObject) |
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); |
else if(window.XMLHttpRequest) |
xmlHttp = new XMLHttpRequest(); |
} |
function startRequest(){ |
createXMLHttpRequest(); |
xmlHttp.open("GET","9-1.aspx",true); |
xmlHttp.onreadystatechange = function(){ |
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) |
alert("服务器返回: " + xmlHttp.responseText); |
} |
xmlHttp.send(null); |
} |
</script> |
</head> |
<body> |
<input type="button" value="测试异步通讯" onClick="startRequest()"> |
</body> |
</html> |
9-1.aspx 代码如下:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> |
<%@ Import Namespace="System.Data" %> |
<% |
Response.Write("异步测试成功,很高兴"); |
%> |
由于IE 浏览器会自动缓存异步通信的结果,不会实时更新服务器的返回结果。(但Firefox 会正常刷新)
为了解决异步连接服务器时IE 的缓存问题,更改客户端代码如下:
var sUrl = "9-1.aspx?" + new Date().getTime(); //地址不断的变化 |
xmlHttp.open("GET",sUrl,true); |
问题二:
当测试程序时,如果客户端和服务器端都在同一台计算机上时,异步对象返回当前请求的http状态码 status == 0 ,于是再次更改客户端代码如下:
//if(xmlHttp.readyState == 4 && xmlHttp.status == 200) |
if( xmlhttp.readyState == 4) |
{ |
if( xmlhttp.status == 200 || //status==200 表示成功! |
xmlhttp.status == 0 ) //本机测试时,status可能为0。 |
alert("服务器返回: " + xmlHttp.responseText); |
} |
<html> |
<head> |
<title>XMLHttpRequest</title> |
<script language="javascript"> |
var xmlHttp; |
function createXMLHttpRequest(){ |
if(window.ActiveXObject) |
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); |
else if(window.XMLHttpRequest) |
xmlHttp = new XMLHttpRequest(); |
} |
function startRequest(){ |
createXMLHttpRequest(); |
var sUrl = "9-1.aspx?" + new Date().getTime(); //地址不断的变化 |
xmlHttp.open("GET",sUrl,true); |
xmlHttp.onreadystatechange = function(){ |
//if(xmlHttp.readyState == 4 && xmlHttp.status == 200) |
if( xmlhttp.readyState == 4) |
{ |
if( xmlhttp.status == 200 || //status==200 表示成功! |
xmlhttp.status == 0) //本机测试时,status可能为0。 |
alert("服务器返回: " + xmlHttp.responseText); |
} |
} |
xmlHttp.send(null); |
} |
</script> |
</head> |
<body> |
<input type="button" value="测试异步通讯" onClick="startRequest()"> |
</body> |
</html> |
相关文章推荐
- Scala学习笔记:数组操作与简单算法示例
- Python学习笔记(二)网络编程的简单示例
- android菜鸟学习笔记13----Android控件(二) 自定义控件简单示例
- 【Spring-AOP-学习笔记-7】@Around增强处理简单示例
- 学习笔记--progressbar简单示例
- 【Spring-AOP-学习笔记-4】@After后向增强处理简单示例
- anychart学习笔记之二获取数据源及简单示例
- python学习笔记:easygui的简单示例
- hadoop学习笔记(11)——hbase shell简单操作示例
- AJAX学习明灯,简单示例:AJAX+存储过程实现无刷新简单登录验证功能!
- Android Binder 机制初步学习 笔记(四,完结)—— Binder 简单应用示例
- php学习笔记(三十)ajax请求和接收参数的实现方式(包括json数据格式的简单处理)
- Libevent 学习笔记 (1)——Libevent 2.0安装与简单示例
- Entity Framework 6 学习笔记2 — 增、删、改、显示简单代码示例
- AJAX 学习笔记[二] 我编写的AJAX 测试代码示例
- entlib5.0 学习笔记 caching application block2 简单使用示例
- 32位汇编语言学习笔记(1)--简单示例
- entlib5.0 学习笔记 caching application block2 简单使用示例
- xStream 学习笔记 - Java对象与XML相互转换简单示例
- 【Spring-AOP-学习笔记-6】@AfterThrowing增强处理简单示例