Prototyp- und AJAX-Tutorial

Einführung in AJAX

AJAX steht für Asynchron JavaScript und XML. AJAX ist eine neue Technik zum Erstellen besserer, schnellerer und interaktiverer Webanwendungen mithilfe von XML, HTML, CSS und Java Script.

Um ein umfassendes Verständnis von AJAX zu erhalten, lesen Sie bitte unser einfaches AJAX-Tutorial .

Prototyp-Unterstützung für AJAX

Mit dem Prototyp-Framework können Sie Ajax-Anrufe auf sehr einfache und unterhaltsame Weise bearbeiten, die auch sicher ist (browserübergreifend). Prototype behandelt auch auf intelligente Weise JavaScript-Code, der von einem Server zurückgegeben wird, und stellt Hilfsklassen für die Abfrage bereit.

Die Ajax-Funktionalität ist im globalen Ajax-Objekt enthalten . Dieses Objekt bietet alle erforderlichen Methoden, um AJAX-Anforderungen und -Antworten auf einfache Weise zu verarbeiten.

AJAX-Anfrage

Tatsächliche Anforderungen werden durch Erstellen von Instanzen des Ajax.Request () -Objekts gestellt .

new Ajax.Request('/some_url', { method:'get' });

Der erste Parameter ist die URL der Anforderung. Der zweite ist der Options-Hash. Die Methodenoption bezieht sich auf die zu verwendende HTTP-Methode. Standardmethode ist POST.

AJAX-Antwortrückrufe

Ajax-Anforderungen sind standardmäßig asynchron. Dies bedeutet, dass Sie Rückrufe benötigen, die die Daten aus einer Antwort verarbeiten. Rückrufmethoden werden im Options-Hash übergeben, wenn eine Anfrage gestellt wird -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

Hier werden zwei Rückrufe im Hash übergeben -

  • onSuccess
  • onFailure

Jeder der beiden oben genannten Anrufe wird basierend auf dem Status der Antwort entsprechend aufgerufen. Der erste Parameter, der an beide übergeben wird, ist das native xmlHttpRequest- Objekt, von dem aus Sie die Eigenschaften responseText und responseXML verwenden können.

Sie können beide Rückrufe angeben, einen oder keinen - es liegt an Ihnen. Andere verfügbare Rückrufe sind -

  • onUninitialized
  • onLoading
  • onLoaded
  • onInteractive
  • onComplete
  • onException

Sie alle stimmen mit einem bestimmten Status des xmlHttpRequest- Transports überein , mit Ausnahme von onException, die ausgelöst wird, wenn beim Versenden anderer Rückrufe eine Ausnahme aufgetreten ist.

NOTE- Die Rückrufe onUninitialized, onLoading, onLoaded und onInteractive werden nicht von allen Browsern konsistent implementiert. Im Allgemeinen ist es am besten, diese zu vermeiden.

Prototyp AJAX-Methoden

Das Ajax-Objekt bietet alle erforderlichen Methoden, um AJAX-Anforderungen und -Antworten auf einfache Weise zu verarbeiten. Hier finden Sie eine vollständige Liste aller Methoden im Zusammenhang mit AJAX.

NOTE - Stellen Sie sicher, dass Sie mindestens die Version 1.6 von prototype.js haben.

S.No. Methode & Beschreibung
1. Ajax-Optionen

Dies ist keine Methode, sondern beschreibt alle Kernoptionen, die von allen AJAX-Anforderern und Rückrufen gemeinsam genutzt werden.

2. Ajax.PeriodicalUpdater ()

Führt regelmäßig eine AJAX-Anforderung aus und aktualisiert den Inhalt eines Containers basierend auf dem Antworttext.

3. Ajax.Request ()

Initiiert und verarbeitet eine AJAX-Anforderung.

4. Ajax.Responders ()

Ein Repository globaler Listener, die über jeden Schritt prototypbasierter AJAX-Anforderungen informiert werden.

5. Ajax.Response ()

Das Objekt, das als erstes Argument aller Ajax-Rückrufanfragen übergeben wurde.

6. Ajax.Updater ()

Führt eine AJAX-Anforderung aus und aktualisiert den Inhalt eines Containers basierend auf dem Antworttext.