脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → AJAX简单异步通信

AJAX简单异步通信实例分析

 更新时间：2015年03月30日 17:10:42   作者：xugang  
这篇文章主要介绍了AJAX简单异步通信,实例分析了Ajax异步通信的技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了AJAX简单异步通信的方法。分享给大家供大家参考。具体分析如下：

客户端：向服务器发出一个空请求。

代码如下：

<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>

服务器端：向客户端直接返回一个字符串。

代码如下：

复制代码 代码如下:
<%@ 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);

在访问的服务器地址末尾添加一个当前时间的毫秒数参数，使得每次请求的URL地址不一样，从而欺骗IE 浏览器来解决IE 缓存导致的更新问题。

问题二：

当测试程序时，如果客户端和服务器端都在同一台计算机上时，异步对象返回当前请求的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>

希望本文所述对大家的Ajax程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Ajax请求和Filter配合案例解析

    Ajax请求和Filter配合案例解析

    这篇文章主要介绍了Ajax请求和Filter配合案例解析的,本文给大家介绍的非常详细，具有参考借鉴加载，需要的朋友可以参考下
    2016-12-12
  • ajax请求添加自定义header参数代码

    ajax请求添加自定义header参数代码

    这篇文章主要介绍了ajax请求添加自定义header参数代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Ajax与mysql数据交互实现留言板功能

    Ajax与mysql数据交互实现留言板功能

    最近自己做了一个小demo，实现了Ajax与MySQL的数据交互，js部分用的是jq，后台用的是PHP，数据库是mysql，下面通过本文给大家详细介绍下
    2016-12-12
  • Ajax 和 Asp 的编程

    Ajax 和 Asp 的编程

    Ajax 和 Asp 的编程...
    2006-10-10
  • Ajax犯的错误处理方法

    Ajax犯的错误处理方法

    ajax 发送请求时状态判断 if else 语句问题如何解决呢？接下来通过本文给大家分享ajax犯的错误处理方法，对ajax错误感兴趣的朋友一起看看吧
    2016-09-09
  • ajax调用简单实例

    ajax调用简单实例

    这篇文章主要介绍了ajax调用简单实例,结合实例形式分析了基于ajax调用讲URL返回数据填充到指定div的功能,需要的朋友可以参考下
    2015-12-12
  • 使用Ajax实现简单的带百分比进度条实例

    使用Ajax实现简单的带百分比进度条实例

    最近做项目遇到这样的需求要求当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验，下面通过实例代码给大家介绍基于ajax实现带百分比进度条效果，需要的的朋友参考下吧
    2017-07-07
  • AJAX显示加载中并弹出图层遮挡页面的实现示例

    AJAX显示加载中并弹出图层遮挡页面的实现示例

    大家都知道AJAX的请求是异步的，这种异步的机制给我们带来了体验上的优化，但是同时我要求我们有更完善的思维去处理一个业务。当用户请求后长时间没有回应是一种非常不好的用户体验，所以我们可以在请求后利用AJAX显示加载中并弹出图层遮挡页面，下面来看看实现方法。
    2016-12-12
  • Ajax调用restful接口传送Json格式数据的方法

    Ajax调用restful接口传送Json格式数据的方法

    这篇文章主要介绍了Ajax调用restful接口传送Json格式数据的方法的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
    2016-07-07
  • ajax 登录功能简单实现(未连接数据库)

    ajax 登录功能简单实现(未连接数据库)

    未连接数据库下实现ajax 登录功能判断登陆成功与失败，喜欢ajax的朋友可以参考下哈，希望对大家有所帮助
    2013-05-05

最新评论