Heim > Artikel > Web-Frontend > AJAX-Beispielanalyse für einfache asynchrone Kommunikation

AJAX-Beispielanalyse für einfache asynchrone Kommunikation

亚连Original: 2018-05-25 11:44:031549Durchsuche

Dieser Artikel stellt hauptsächlich die einfache asynchrone Kommunikation mit AJAX vor. Er analysiert die Techniken und zugehörigen Vorsichtsmaßnahmen anhand von Beispielen. Freunde in Not können sich darauf beziehen mit Beispielen. Einfache asynchrone Kommunikationsmethode. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Client:

Senden Sie eine leere Anfrage an den Server. Der Code lautet wie folgt:

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

Serverseite:

gibt ein Zeichen direkt zurück zur Client-Zeichenfolge.

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

Problem 1:

Da der IE-Browser die Ergebnisse der asynchronen Kommunikation automatisch zwischenspeichert, aktualisiert er die Rückgabeergebnisse des Servers nicht in Echtzeit. (Aber Firefox wird normal aktualisiert)

Um das Cache-Problem des IE beim asynchronen Herstellen einer Verbindung zum Server zu lösen, ändern Sie den Client-Code wie folgt:

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

Fügen Sie am Ende der aufgerufenen Serveradresse einen Millisekundenparameter der aktuellen Zeit hinzu, sodass die URL-Adresse jeder Anfrage unterschiedlich ist und so den IE-Browser täuscht, um das verursachte Aktualisierungsproblem zu lösen durch IE-Cache.

Frage 2:

Wenn sich beim Testen des Programms sowohl Client als auch Server auf demselben Computer befinden, gibt das asynchrone Objekt den aktuellen HTTP-Statuscode zurück request == 0 , sodass der Client-Code erneut wie folgt geändert wird:

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

Der endgültige Client-Code lautet also wie folgt:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung des AJAX-Mechanismus und der domänenübergreifenden Kommunikation

Leistungsoptimierungsmethode von Ajax-Nicht- Seite aktualisieren

Ajax-Bild-Upload basierend auf Firefox

Das obige ist der detaillierte Inhalt vonAJAX-Beispielanalyse für einfache asynchrone Kommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des AJAX-Mechanismus und der domänenübergreifenden KommunikationNächster Artikel：Detaillierte Erläuterung des AJAX-Mechanismus und der domänenübergreifenden Kommunikation

In Verbindung stehende Artikel

Mehr sehen