Heim > Web-Frontend > js-Tutorial > Hauptteil

AJAX-Beispielanalyse für einfache asynchrone Kommunikation

亚连
Freigeben: 2018-05-25 11:44:03
Original
1539 Leute haben es durchsucht

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>
Nach dem Login kopieren


Serverseite:

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

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

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);
Nach dem Login kopieren


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);
}
Nach dem Login kopieren


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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!