Übernehmen Sie den Befehl mit Ajax

Möchten Sie dynamischer, reaktionsschnellere und desktop-ähnliche Webanwendungen wie Google Mail und Google Maps erstellen? Dann ist dieser Artikel für Sie! Es führt Sie durch die AJAX -Grundlagen und durch den Aufbau einer einfachen AJAX -Anwendung.

Diese Anwendung heißt WebConsole, eine Browser -Schnittstelle zum Ausführen von Systembefehlen, für die Sie normalerweise einen Shell -Zugriff benötigen. Es gibt auch kurze Beispiele für die Verwendung der AJAX -Funktionalität von zwei beliebten JavaScript -Bibliotheken - JQuery und Yui.

In diesem Artikel, der erstmals 2005 veröffentlicht und kürzlich aktualisiert wurde, werde ich die Erstellung einer einfachen, wiederverwendbaren JavaScript -Funktion für HTTP -Anforderungen erläutern. Dann wende ich diese Funktion bei der Erstellung einer einfachen Anwendung an.

Obwohl es einige Yui- und JQuery -Beispiele gibt, ist der Artikel kein Tutorial in einer bestimmten AJAX -Bibliothek. Stattdessen soll Ihnen praktische Informationen über HTTP-Anfragen mehr praktische Informationen erhalten, damit Sie bei der Bewertung solcher Bibliotheken oder der Entscheidung, sich selbst zu bewerten, in einer besseren Position sind.

Key Takeaways

• AJAX ermöglicht die Erstellung dynamischer, reaktionsschneller Webanwendungen, ähnlich wie Google Mail- und Google Maps, indem HTTP -Anforderungen im Browser bearbeitet werden.
• Das Tutorial führt eine wiederverwendbare JavaScript -Funktion zur Erstellung von HTTP -Anforderungen vor, die über verschiedene Anwendungen hinweg verwendet werden können, ohne sich auf bestimmte Bibliotheken wie JQuery oder Yui zu verlassen.
• Ein einfaches Beispiel demonstriert die grundlegenden Schritte zur Erstellung einer HTTP -Anforderung: Erstellen eines XMLHTTPrequest -Objekts, der Zuweisung einer Rückruffunktion und Senden der Anforderung.
• Der Artikel führt die Webconsole-Anwendung vor, wobei die Befehlsausführung der Server über eine Browserschnittstelle aktiviert wird und die praktische AJAX-Verwendung veranschaulicht.
• Sicherheitsbedenken werden hervorgehoben, wobei hervorgehoben wird, wie wichtig es ist, ausführbare Befehle einzuschränken und Eingaben zu sanitieren, um den nicht autorisierten Serverzugriff zu verhindern.
• Das Tutorial umfasst erweiterte Themen, einschließlich der Behandlung verschiedener Datenformate wie XML und JSON und der Integration von AJAX in beliebte JavaScript -Bibliotheken für verbesserte Funktionen.

Ein einfaches Beispiel für HTTP -Anforderung

Lassen Sie uns zunächst den Fluss der HTTP -Anfrage in JavaScript überarbeiten und die Antwort bearbeiten. Dies ist nur ein kurzes Beispiel, um Ihr Speicher zu aktualisieren. Für alle würzigen Details finden Sie siehe Einführungsartikel von SitePoint "Ajax: Usable Interaktivität mit Remote -Skripten".

Es gibt drei grundlegende Schritte:

1. Erstellen Sie ein XMLHTTPREquest -Objekt.


2. eine Rückruffunktion zuweisen, um die HTTP -Antwort zu verarbeiten.


3. Machen Sie (senden) die Anfrage.

Sehen wir uns ein Beispiel an, in dem wir ein einfaches HTML -Dokument test.html anfordern, das nur den Text "Ich bin ein Test" enthält. Wir werden dann den Inhalt der test.html -Datei:

alert () alert:

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

So funktioniert dieses Beispiel:

1. Der Benutzer klickt auf die Schaltfläche "Eine Anforderung machen".


2. Dies ruft die Funktion makeRequest () mit einem Parameter auf: den Namen einer HTML -Datei im selben Verzeichnis. In diesem Fall ist es test.html.


3. Die Anfrage wird gesendet.


4. Das Ereignis von OnReadyStatechange feuert und die Ausführung wird an die Warnmeldung übergeben ().


5. alertcontents () prüft, ob die Antwort empfangen wurde, und wenn es in Ordnung ist, alert () s den Inhalt der test.html -Datei.

Testen Sie das Beispiel für sich selbst und sehen Sie sich die Testdatei an.

Das Problem

Das obige Beispiel hat gut funktioniert, aber es gibt eine Sache, die wir verbessern müssen, bevor wir für die Hauptsendezeit bereit sind. Die Verbesserung besteht darin, eine wiederverwendbare Anforderungsfunktion zu codieren, die alle langweiligen und sich wiederholenden Objekte und Anforderungs-/Antwortmaterial übernimmt und gleichzeitig den vorliegenden Teil anderen Funktionen überlässt, die anfordert-agnostisch sind und nur mit dem Ergebnis umgehen, unabhängig von seiner Quelle.

.

.

.

Im obigen Beispiel brauchten wir eine globale Variable, http_request, die sowohl durch die Funktionen von Makequest () als auch nach Warnkonsultenten () zugänglich war, was in Bezug auf Wiederverwendbarkeit nicht gut ist und auch die Namensnamenkollisionen durchzuführen. Im Idealfall sollte MakeRequest () die Anfrage ausführen und die Warnkontrolle () nur das Ergebnis darstellen; Keine Funktionsbedürfnisse wissen über den anderen oder erfordern.

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

Hier ist der Code für unsere wiederverwendbare Anforderungsfunktion:

Diese Funktion empfängt drei Parameter:

• die URL, um
zu bekommen
• Die Funktion, die aufgerufen werden muss, wenn die Antwort empfangen wird

Ein Flag, wenn die Rückruffunktion ein XML -Dokument (TRUE) oder Klartext (falsch, Standard) erwartet

Diese Funktion basiert auf zwei JavaScript -Funktionen, um das Anforderungsobjekt gut zu wickeln und zu isolieren. Die erste ist die Fähigkeit, neue Funktionen (als anonyme Funktionen bezeichnete Funktionen) im laufenden Fliegen zu definieren:

http_request.onReadyStatechange = function () {...}

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

Der andere Trick ist die Fähigkeit, Rückruffunktionen aufzurufen, ohne ihre Namen im Voraus zu kennen. Zum Beispiel:

Beachten Sie, wie der Name der Rückruffunktion ohne Zitate übergeben wird.

Sie können die Funktion einfach noch wiederverwendbarer machen, indem die HTTP -Anforderungsmethode sowie jede Abfragezeichenfolge als Parameter über die Funktion übergeben und dann in den Aufrufen zu öffnen () und send () () () Methoden verwendet werden. Auf diese Weise können Sie auch Postanfragen erstellen, zusätzlich zu den Erhalten, die es ursprünglich ausführen sollte.

Eine weitere Fähigkeit der Funktion ist die Handhabung anderer Antwortcodes als 200, was praktisch sein könnte, wenn Sie genauer sein und entsprechende Maßnahmen abhängig vom Typ des zurückgegebenen Erfolgs/Fehlercode ergreifen möchten.

Das einfache Beispiel Revisited

Lassen Sie uns nun das vorherige Beispiel wiederholen, in dem der Inhalt einer test.html -Datei alert () ed wurde. Diesmal sind die überarbeiteten Versionen der beiden verwendeten Funktionen diesmal viel einfacher:

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

Wie Sie sehen können, ist Alarm intents () einfach präsental: Es gibt keine Zustände, ReadyStates oder HTTP -Anfragen, die überhaupt herumfliegen.

Da diese Funktionen jetzt nur Einzeiler sind, können wir sie tatsächlich vollständig loswerden und den Funktionsaufruf stattdessen ändern. Das ganze Beispiel wird also:

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

Ja, es ist so einfach! Sehen Sie sich das Beispiel und den vollständigen Quellcode an (verfügbar über unsere alte Freundschaftsquelle).

unser Projekt: Die Webconsole -Anwendung

Die AJAX -Grundlagen kennen und mit einer wiederverwendbaren Art der Anfragen bewaffnet, lassen Sie uns tiefer gehen, um etwas zu schaffen, das tatsächlich im wirklichen Leben verwendet werden kann.

Die von uns erstellte Anwendung ermöglicht es Ihnen, einen Shell-Befehl auf Ihrem Webserver auszuführen, unabhängig davon, ob es sich um Windows- oder Linux-basiert handelt. Wir werden sogar ein wenig CSS -Anstrengung unternehmen, um die App eher wie ein Konsolenfenster zu fühlen.

In Bezug auf die Schnittstelle haben wir eine scrollbare

, die die Ergebnisse der bisher ausgeführten Befehle enthält, und ein , in dem wir die zu ausgeführten Befehle eingeben. Beide haben einen schwarzen Hintergrund und eine graue Kurier -Schriftart. Hier ist ein Screenshot.

die html

Hier ist der HTML -Teil der Anwendung:

var callmeback = alert;<br>
callmeback('test'); // alerts 'test'

Das ist es: A

, das mit den Ergebnissen des zu ausgeführten Befehls aktualisiert wird, und ein , in das wir Befehle eingeben können. Es ist eine schöne, saubere Oberfläche ohne

Das obige ist der detaillierte Inhalt vonÜbernehmen Sie den Befehl mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!