Maison >interface Web >js tutoriel >Analyse d'un exemple de communication asynchrone simple AJAX

Analyse d'un exemple de communication asynchrone simple AJAX

亚连original: 2018-05-25 11:44:031581parcourir

Cet article présente principalement la communication asynchrone simple AJAX. Il analyse les techniques et les précautions associées de la communication asynchrone Ajax avec des exemples. Il a une certaine valeur de référence.

Cet article décrit AJAX. avec des exemples. Méthode de communication asynchrone simple. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Client : Envoyer une requête vide au serveur.

Le code est le suivant :

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

Côté serveur : Retourner directement au client une chaîne.

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    Response.Write("异步测试成功，很高兴");
%>

Problème 1 :

Étant donné que le navigateur IE met automatiquement en cache les résultats de la communication asynchrone, il ne mettra pas à jour les résultats de retour du serveur en temps réel. (Mais Firefox se rafraîchira normalement)

Afin de résoudre le problème de cache d'IE lors de la connexion au serveur de manière asynchrone, modifiez le code client comme suit :

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

Ajouter un paramètre milliseconde de l'heure actuelle à la fin de l'adresse du serveur consulté, afin que l'adresse URL de chaque requête soit différente, trompant ainsi le navigateur IE pour résoudre la mise à jour problème causé par le cache IE.

Question 2 :

Lors du test du programme, si le client et le serveur sont tous deux sur le même ordinateur, l'objet asynchrone renvoie le code d'état http de l'état actuel request == 0 , donc le code client est à nouveau modifié comme suit :

//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);
}

Donc, le code client final est le suivant suit :

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles Liés

Voir plus