快捷導(dǎo)航

AJAX簡單異步通信實例分析

更新時間：2015年03月30日 17:10:42 作者：xugang

這篇文章主要介紹了AJAX簡單異步通信,實例分析了Ajax異步通信的技巧與相關(guān)注意事項,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了AJAX簡單異步通信的方法。分享給大家供大家參考。具體分析如下：

客戶端：向服務(wù)器發(fā)出一個空請求。

代碼如下：

<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("服務(wù)器返回: " + xmlHttp.responseText);
  }
  xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="測試異步通訊" onClick="startRequest()">
</body>
</html>

服務(wù)器端：向客戶端直接返回一個字符串。

代碼如下：

復(fù)制代碼代碼如下:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>

<%@ Import Namespace="System.Data" %>

<%

    Response.Write("異步測試成功，很高興");

%>

問題一：

由于IE 瀏覽器會自動緩存異步通信的結(jié)果，不會實時更新服務(wù)器的返回結(jié)果。（但Firefox 會正常刷新）

為了解決異步連接服務(wù)器時IE 的緩存問題，更改客戶端代碼如下：

var sUrl = "9-1.aspx?" + new Date().getTime(); //地址不斷的變化
xmlHttp.open("GET",sUrl,true);

在訪問的服務(wù)器地址末尾添加一個當(dāng)前時間的毫秒數(shù)參數(shù)，使得每次請求的URL地址不一樣，從而欺騙IE 瀏覽器來解決IE 緩存導(dǎo)致的更新問題。

問題二：

當(dāng)測試程序時，如果客戶端和服務(wù)器端都在同一臺計算機(jī)上時，異步對象返回當(dāng)前請求的http狀態(tài)碼 status == 0 ，于是再次更改客戶端代碼如下：

//if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
if( xmlhttp.readyState == 4)
{
   if( xmlhttp.status == 200 || //status==200 表示成功！
     xmlhttp.status == 0 ) //本機(jī)測試時，status可能為0。
      alert("服務(wù)器返回: " + 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) //本機(jī)測試時，status可能為0。
      alert("服務(wù)器返回: " + xmlHttp.responseText);
     }
  }
  xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="測試異步通訊" onClick="startRequest()">
</body>
</html>

希望本文所述對大家的Ajax程序設(shè)計有所幫助。

您可能感興趣的文章: