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程序设计有所帮助。

赞 (0)

相关推荐

  • ajax实现远程通信

    本文实例为大家分享了ajax实现远程通信,供大家参考,具体内容如下 第一个文件:html  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax解决跨域问题</title> <script src="jquery-3.0.0.min.js" type="text/j

  • 快速获取Ajax通信对象的方法

    实例如下: function getXHR() { // 该方法用于获取Ajax通信对象 var xhr = null; if (window.XMLHttpRequest != null && window.XMLHttpRequest != undefined) { xhr = new XMLHttpRequest(); } else { / 兼容早期的IE浏览器 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } ret

  • AJAX机制详解以及跨域通信

    1.Ajax 1.1.Ajax简介   Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005年 Jesse James Garrett发表的一篇题为"Ajax:A new Approach to Web Applications".他在这篇文       章中介绍了一种新技术,用他的话说,就是Ajax :Asynchronous JavaScript +XML的缩写. Aja

  • AJAX简单异步通信实例分析

    本文实例讲述了AJAX简单异步通信的方法.分享给大家供大家参考.具体分析如下: 客户端:向服务器发出一个空请求. 代码如下: <html> <head> <title>XMLHttpRequest</title> <script language="javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHtt

  • asp.net+ajax简单分页实例分析

    本文实例讲述了asp.net+ajax简单分页实现方法.分享给大家供大家参考,具体如下: 这里涉及两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据,后一个用来对分页进行处理.js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分.不错,code is cheap.看代码: /*testJs.js*/ // 此函数等价于document.getElementById /document.all fun

  • AJAX简单应用实例-弹出层

    function createobj() {  if (window.ActiveXObject) {          return(new ActiveXObject("Microsoft.XMLHTTP"));      }      else if (window.XMLHttpRequest) {          return(new XMLHttpRequest());      } } function personalInfo() {   var oBao=creat

  • vue服务端渲染操作简单入门实例分析

    本文实例讲述了vue服务端渲染操作.分享给大家供大家参考,具体如下: 想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!! 一,首先实现下官网的基本案例 随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json:创建server.js:然后按照vue-ssr官方链接:https://ssr.v

  • Oracle中scott表结构与简单查询实例分析

    本文实例讲述了Oracle中scott表结构与简单查询的方法.分享给大家供大家参考.具体分析如下: 1.scott用户的表的结构 查看表结构 desc 表名;//desc emp; emp表: SQL> desc emp; 名称 是否为空? 类型 ----------------- -------- ------------ EMPNO NOT NULL NUMBER(4) 雇员编号 ENAME VARCHAR2(10) 雇员姓名 JOB VARCHAR2(9) 雇员职位 MGR NUMBER(

  • AngularJS ng-repeat指令及Ajax的应用实例分析

    AngularJS ng-repeat指令及Ajax的应用实例分析

    本文实例讲述了AngularJS ng-repeat指令及Ajax的应用.分享给大家供大家参考,具体如下: ng-repeat 指令用于循环输出指定次数的 HTML 元素.集合必须是数组或对象. 定义: <element ng-repeat="expression"></element> 说明:experssion表达式定义了如何循环集合.常用的如:x in records 下面通过一个例子,来说明ng-repeat如何绘制一个表格: <div ng-ap

  • JSP程序运行原理、文档结构及简单输入输出实例分析

    本文实例讲述了JSP程序运行原理.文档结构及简单输入输出.分享给大家供大家参考.具体如下: 目标: 掌握Web应用的文档结构: 掌握JSP的运行原理: 掌握JSP的简单输入和输出. 主要内容: 通过一个简单实例介绍Web应用的文档结构和运行原理: 通过一个简单的注册功能介绍基本的输入输出. 实现内容:客户端验证. 1. 文档结构 每个应用都有一个根目录,例如ch2:理论上可以放在任何地方,但是需要配置,简单的做法,直接放在了webapps这个目录下,在这个目录的应用会被自动加载. 在根目录下会有

  • jQuery+JSON实现AJAX二级联动实例分析

    本文实例讲述了jQuery+JSON实现AJAX二级联动的方法.分享给大家供大家参考,具体如下: 后台Handler.ashx <%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; public class Handler : IHttpHandler { Common coObj = new Common();

  • Android TabLayout(选项卡布局)简单用法实例分析

    Android TabLayout(选项卡布局)简单用法实例分析

    本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到很漂亮的效果.但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个

  • java Swing组件setBounds()简单用法实例分析

    java Swing组件setBounds()简单用法实例分析

    本文实例讲述了java Swing组件setBounds()简单用法.分享给大家供大家参考,具体如下: 先看API: public void setBounds(Rectangle r) 移动组件并调整其大小,使其符合新的有界矩形 r.由 r.x 和 r.y 指定组件的新位置,由 r.width 和 r.height 指定组件的新大小 参数: r - 此组件的新的有界矩形 从API来看,该方法的作用相当于setLocation()与 setSize()的总和.在实际使用时,需将容器的layout

随机推荐