JavaScript – Asynchrone AJAX-Anfragen mit Beispielen. So geben Sie HTML mit AJAX aus. Was ist AJAX?

JQuery ist eine Javascript-Bibliothek, deren Ziel es ist, „weniger zu schreiben, mehr zu tun“. jQuery lässt sich ganz einfach mit Ihrer Website verbinden und verwenden. jQuery macht es viel einfacher, Javascript auf Ihrer Website zu verwenden.

jQuery eliminiert eine ganze Reihe von Zeilen Javascript-Code und ermöglicht es Ihnen, diese ganze Menge Zeilen mit nur einer Methode zu implementieren.

AJAX ist asynchron (d. h. der Browser kann nach dem Senden einer Anfrage tun, was er will, z. B. eine auf eine Antwort wartende Nachricht anzeigen, auf der Seite scrollen usw.), JavaScript und XML. Es wird verwendet, um dynamische und schnelle Webseiten zu erstellen. Mit AJAX können wir einen Teil einer Webseite aktualisieren, ohne die gesamte Seite neu laden zu müssen.

Die Kombination von jQuery und AJAX bietet leistungsstarke Funktionalität. Mit JQuery und Ajax können Sie eine Anfrage stellen und Informationen in verschiedenen Formaten erhalten, darunter XML, HTML und sogar einfachen Text. Sie können das JSON-Format zum Datenaustausch verwenden. Wir können die per Ajax-Anfrage empfangenen Daten in unserer HTML-Seite verwenden.

jQuery macht die bestehende Browser-Ajax-API leistungsfähiger und benutzerfreundlicher. Ajax-Aufrufe auf normale Weise mit Javascript durchzuführen, ist etwas knifflig, da man bedenken muss, dass verschiedene Browser unterschiedliche Ansätze zum Erstellen des XMLHttpRequest-Objekts erfordern. Darüber hinaus wird die Übermittlung von Daten, beispielsweise aus Formularen, schwieriger, wenn Sie für den Ajax-Aufruf normales Javascript verwenden.

jQuery bietet einfache und leistungsstarke Funktionen, die die AJAX-Methoden von Javascript erweitern und einen flexibleren Ansatz ermöglichen.

In diesem kurzen Artikel zeige ich Ihnen, wie Sie jQuery und AJAX in einem einfachen PHP-Formular verwenden. Fangen wir an... Um jQuery und AJAX zu verwenden, benötigen wir zwei Dateien. Die erste Datei enthält den HTML/PHP-Code, über den die Ajax-Anfrage gestellt wird. In der zweiten Datei verarbeiten wir die Ajax-Anfrage und geben das Ergebnis an die erste Seite zurück.

Im obigen Code erhalten wir den Namen und die Nummer des Studenten und senden sie mithilfe von JQuery und Ajax an details.php.

Funktion getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( Typ: "POST", URL: " Details .php", Daten: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" Address of Roll no " +rno +" is "+result ) ; )); )

Im obigen Code erhalten wir die Adresse des Schülers anhand der Sequenznummer und seines Namens.

Für dieses Beispiel müssen Sie eine Schuldatenbank und eine Schülertabelle erstellen. Die Studententabelle enthält Felder mit Namen, Sequenznummern und Adressen.

Ich hoffe, dass Sie diesen Artikel hilfreich finden.

In diesem Artikel werden wir über die Interaktion von Ajax mit PHP sprechen. Wie verbinde ich die Arbeit eines Ajax-Skripts und eines PHP-Codes? Wie verwende ich Ajax in der Webentwicklung? Wenn Sie sich für solche Fragen interessieren, finden Sie in unserem Artikel Antworten darauf. Sowie Beispiele für Ajax-PHP-Code.

Um zu verstehen, ob wir Ajax mit PHP überhaupt brauchen, wollen wir herausfinden, wofür es nützlich sein kann. Der Einsatz von Ajax+ PHP kann vielfältig sein, lediglich dass man mit dieser Technologie keine suchmaschinenrelevanten Seitenelemente konstruieren kann. Da Ajax Seitenelemente nach dem Laden lädt, wenn JS-Ereignisse aufgerufen werden, aber wie wir wissen, Suchmaschinen keinen Javascript-Code lesen können, müssen Sie sorgfältig auswählen, wo Sie Ajax mit PHP verwenden müssen und wo nicht.

Wo kann ich Ajax + PHP verwenden?

1. Einen neuen Kommentar hinzufügen

4. Organisieren einer Suche auf der Website (automatische Vervollständigung)

5. Schritt-für-Schritt-Benutzerregistrierung auf der Website

6. E-Mail abonnieren

7. Fotos ansehen

Und andere…

Wie Sie sehen, gibt es viele Möglichkeiten, Ajax + PHP zu verwenden. Das heißt, es kann dort verwendet werden, wo ein Neuladen der Seite nicht sinnvoll wäre und Sie lediglich Daten mit dem Server austauschen müssen.

Wo Sie Ajax + PHP nicht verwenden sollten

Meine Meinung ist objektiv, vielleicht denken Sie anders, aber aufgrund meiner Erfahrung werde ich sagen, dass Ajax + PHP nicht verwendet werden sollte:

1. Um das Menü zu implementieren

2. Implementierung von Registerkarten auf der Seite (Beispiel: Wenn Sie in einem Online-Shop auf einer Produktseite eine Bewertung, Informationen, Kommentare, Fotos, Videos usw. sehen, müssen beim Wechseln dieser Registerkarten keine Daten geladen werden.)

Und andere negative Beispiele, die dem besseren Ranking Ihrer Seite schaden können.

Tatsächlich kann die Ajax-Technologie ohne PHP-Skripte nicht existieren, da Ajax nur Daten an den Server sendet und eine Antwort erhält, ohne die Seiten neu zu laden. Daher ist es richtiger, die Frage zu stellen, wie man die Arbeit von Ajax und PHP verbindet. Aber darüber werden wir im nächsten Absatz des Artikels sprechen (Ajax-PHP-Beispiel) und jetzt werden wir die Besonderheiten der Funktionsweise von Ajax verstehen.

Um Daten an den Server zu senden, müssen Sie ein XMLHTTPRequest-Objekt erstellen. Öffnen Sie damit die URL (PHP-Skript), senden Sie Daten an sie (POST- oder GET-Methode), empfangen Sie eine Antwort und zeigen Sie mithilfe der Kenntnisse der js-Sprache die empfangene Serverantwort auf dem Monitor an (die Antwort kann ein beliebiges Fragment sein). oder Element der Site-Seite).

Schauen Sie sich zur Verdeutlichung das folgende Diagramm an, das die Interaktion von Ajax mit PHP veranschaulicht.

Als Beispiel für die Ajax-Interaktion mit PHP erstellen wir zwei Dateien:

1. ajax_page.html

2. get_ajax.php

Schauen wir uns zunächst die Benutzerseite der Anwendung an, also die ajax_-Seite. html:

Ajax + PHP: Beispiel | Site-Funktion = false;) ) if (!xmlhttp && typeof XMLHttpRequest!="undefiniert") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp; ) function ajax(param) ( if (window.XMLHttpRequest) req = new XmlHttp(); method=(!param.method ? "POST" : param.method.toUpperCase()); if(method=="GET") ( send=null; param.url=param.url+"&ajax=true"; ) else ( send=""; for (var i in param.data) send+= i+"="+param.data[i]+"&"; send=send+"ajax=true"; ) req.open(method, param .url, true); if(param.statbox)document.getElementById(param.statbox).innerHTML = " "; req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send(send); req.onreadystatechange = function() ( if (req.readyState == 4 && req .status == 200) //wenn die Antwort positiv ist ( if(param.success)param.success(req.responseText); ) ) ) Hier erhalten wir Berichte über den Betrieb der Ajax-Anwendung und die Serverantwort.

Eingabefeld 1

Geben Sie Ihren Text ein.!

Eingabefeld 2

Freitext... Ich bin von diesem Artikel besessen und möchte RSS abonnieren, damit ich Artikel wie diesen öfter lesen kann!!!

ajax_page.html:

Schauen wir uns die Javascript-Seite dieses Beispiels an:

XmlHttp() ist eine Funktion, die ein XMLHttpRequest()-Objekt erstellt; es ist so kompakt und browserübergreifend wie möglich geschrieben.

ajax(param) – unser Handler empfängt beim Aufrufen von Ereignissen (onclick) die notwendigen Daten im Parameter-Array:

URL – wohin die Daten gesendet werden sollen, und sie kann in der folgenden Form vorliegen: Seite. PHP? Parameter = Wert, d. h. Informationen können mit der GET-Methode übertragen werden.

statbox – ID des HTML-Blocks, der die Ergebnisse der Ajax + PHP-Anwendung empfängt.

Methode – Methode zum Senden von Daten, kann POST oder GET sein. In unserem Beispiel verwenden wir die POST-Methode, gleichzeitig können aber auch Informationen über die URL mit der GET-Methode übermittelt werden.

data – Array der übertragenen Daten. In unserem Beispiel werden die Daten automatisch aus den Feldern 1 und 2 übernommen, Sie können aber auch einfach Daten schreiben: (Name: „Wert“).

Erfolg – ​​der Name der Funktion oder die Funktion selbst, die die empfangenen Daten (Text) verarbeiten wird.

Wie Sie sehen, erfolgt der Aufruf der Ajax-Funktion durch das Ereignis onclick=ajax().

Schauen wir uns nun die Serverseite der Ajax + PHP-Anwendung an, also get_ajax. PHP:

Hier ist alles viel einfacher. Zuerst legen wir die Kodierung der Ausgabedaten mithilfe des Headers fest. Wir verbieten das Daten-Caching. sleep(2) – pausiert das Skript für 2 Sekunden, um die Warteanimation wait.gif zu sehen. Wir geben die empfangenen Daten aus, lesen alle Elemente des $_POST-Arrays und konvertieren sie in die erforderliche Kodierung (für Kyrillisch).

Um unsere Ajax-PHP-Anwendung zu starten, laden Sie die Seite ajax_page.html in den Browser

Folgendes bekam ich, als ich auf die Schaltfläche „AJAX TESTEN“ klickte:

Dies ist die Antwort, die von der Datei get_ajax.php erhalten wurde:

Es gibt noch Fragen dazuAjax +PHP? Fragen Sie sie in den Kommentaren unten ...

Ich habe diesen Artikel auf Wunsch von Anfängern gestartet, die gerade erst anfangen, JS/jQuery zu beherrschen und früher oder später vor dem Problem stehen, wie man die Ajax-Technologie in der Praxis einsetzen kann. In diesem Teil werde ich es in einfacher Sprache versuchen ( Lassen Sie fortgeschrittene Benutzer dadurch nicht verwirren) erklären, wie Sie diesen „Trick“ mithilfe der jQuery-Bibliothek in Ihren Projekten anwenden.

Also... jQuery verfügt über mehrere Methoden, die Anfragen an die Serverseite der Site stellen, ohne die Seite neu zu laden. Wir werden nicht jede Methode einzeln „unter die Lupe nehmen“, aus dem einfachen Grund, dass es sich bei allen um abgespeckte Funktionen der Methode $.ajax() handelt. Schauen wir uns zunächst den folgenden Code an und schauen uns ihn dann genauer an:

HTML ( index.html-Datei)

Coole Seitenseite. Klicken Sie auf mich!

In dieser Datei haben wir die jQuery-Bibliothek, eine Datei mit unserem JS-Code, eine Schaltfläche (id="btn"), bei deren Anklicken eine Ajax-Anfrage gestartet wird, und einen Block (id="output"), in dem Wir werden das Ergebnis der Ajax-Anfrageoperation ausgeben

JS/jQuery ( script.js-Datei)

$(function())( var output = $("#output"); // Informationsausgabeblock $("#btn").on("click", function())( $.ajax(( url: " path/ to/handler.php", // Pfad zum PHP-Handler-Typ: „POST“, // Datenübertragungsmethode dataType: „json“, // Typ der erwarteten Daten in den Antwortdaten: (Schlüssel: 1), // Daten, die wir vor dem Senden an den Server übertragen: function())( // Die Funktion wird vor dem Senden der Anfrage aufgerufen. Output.text("Die Anfrage wurde gesendet. Warten Sie auf eine Antwort."); error: function( req, text, error)( // Fehler beim Verfolgen einer Ajax-Anfrage verfolgen Output.text("Houston, wir haben ein Problem! " + text + " | " + error); ), complete: function())( // Die Funktion wird aufgerufen, wenn die Anfrage abgeschlossen ist. Output.append("

Die Anfrage ist vollständig abgeschlossen!

Ich habe diesen Code sofort kommentiert, sodass keine besonderen Fragen auftauchen sollten. Das Einzige, was ich für Fans von Copy-Paste beachten möchte, ist, dass Sie im URL-Parameter den tatsächlichen Pfad zum Handler angeben müssen. Und noch etwas: Im Beispiel übermitteln wir manuell eingegebene Daten (Schlüssel „key“ mit dem Wert „1“), aber in realen Projekten werden diese Daten aus einigen Quellen übernommen, aber darüber sprechen wir später.

PHP-Handler ( Datei handler.php)