jQuery - Ajax

AJAX ist eine Abkürzung für Asynchronous JavaScript and XML. Diese Technologie hilft uns, Daten vom Server zu laden, ohne dass die Browserseite aktualisiert werden muss.

Wenn Sie mit AJAX noch nicht vertraut sind, empfehlen wir Ihnen, unser Ajax-Tutorial durchzulesen, bevor Sie fortfahren.

JQuery ist ein großartiges Tool, das eine Vielzahl von AJAX-Methoden zur Entwicklung von Webanwendungen der nächsten Generation bietet.

Einfache Daten laden

Dies ist sehr einfach, um statische oder dynamische Daten mit JQuery AJAX zu laden. JQuery bietetload() Methode, um die Arbeit zu erledigen -

Syntax

Hier ist die einfache Syntax für load() Methode -

[selector].load( URL, [data], [callback] );

Hier ist die Beschreibung aller Parameter -

URL- Die URL der serverseitigen Ressource, an die die Anforderung gesendet wird. Dies kann ein CGI-, ASP-, JSP- oder PHP-Skript sein, das Daten dynamisch oder aus einer Datenbank generiert.
data- Dieser optionale Parameter stellt ein Objekt dar, dessen Eigenschaften in ordnungsgemäß codierte Parameter serialisiert werden, die an die Anforderung übergeben werden sollen. Wenn angegeben, erfolgt die Anforderung über dasPOSTMethode. Wenn weggelassen, wird dieGET Methode wird verwendet.
callback- Eine Rückruffunktion, die aufgerufen wird, nachdem die Antwortdaten in die Elemente des übereinstimmenden Satzes geladen wurden. Der erste an diese Funktion übergebene Parameter ist der vom Server empfangene Antworttext und der zweite Parameter ist der Statuscode.

Beispiel

Betrachten Sie die folgende HTML-Datei mit einer kleinen JQuery-Codierung:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Hier load() initiiert eine Ajax-Anfrage an die angegebene URL /jquery/result.htmlDatei. Nach dem Laden dieser Datei wird der gesamte Inhalt in <div> mit der ID- Stufe ausgefüllt . Angenommen, unsere Datei /jquery/result.html enthält nur eine HTML-Zeile -

<h1>THIS IS RESULT...</h1>

Wenn Sie auf die angegebene Schaltfläche klicken, wird die Datei result.html geladen.

Abrufen von JSON-Daten

Es würde eine Situation geben, in der der Server eine JSON-Zeichenfolge für Ihre Anforderung zurückgibt. JQuery-DienstprogrammfunktiongetJSON() analysiert die zurückgegebene JSON-Zeichenfolge und stellt die resultierende Zeichenfolge der Rückruffunktion als ersten Parameter zur Verfügung, um weitere Maßnahmen zu ergreifen.

Syntax

Hier ist die einfache Syntax für getJSON() Methode -

[selector].getJSON( URL, [data], [callback] );

Hier ist die Beschreibung aller Parameter -

URL - Die URL der serverseitigen Ressource, die über die GET-Methode kontaktiert wurde.
data - Ein Objekt, dessen Eigenschaften als Name / Wert-Paare dienen, die zum Erstellen einer an die URL anzuhängenden Abfragezeichenfolge oder einer vorformatierten und codierten Abfragezeichenfolge verwendet werden.
callback- Eine Funktion, die aufgerufen wird, wenn die Anforderung abgeschlossen ist. Der Datenwert, der sich aus der Zusammenfassung des Antwortkörpers als JSON-Zeichenfolge ergibt, wird als erster Parameter an diesen Rückruf und der Status als zweiter Parameter übergeben.

Beispiel

Betrachten Sie die folgende HTML-Datei mit einer kleinen JQuery-Codierung:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Hier JQuery-Dienstprogramm getJSON() initiiert eine Ajax-Anfrage an die angegebene URL result.jsonDatei. Nach dem Laden dieser Datei wird der gesamte Inhalt an die Rückruffunktion übergeben, die schließlich in <div> mit der ID- Stufe ausgefüllt wird . Angenommen, unsere result.json-Datei enthält folgenden json-formatierten Inhalt:

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

Wenn Sie auf die angegebene Schaltfläche klicken, wird die Datei result.json geladen.

Daten an den Server übergeben

Oft sammeln Sie Eingaben vom Benutzer und übergeben diese Eingaben zur weiteren Verarbeitung an den Server. Mit JQuery AJAX war es einfach genug, gesammelte Daten mithilfe von an den Server zu übergebendata Parameter einer verfügbaren Ajax-Methode.

Beispiel

Dieses Beispiel zeigt, wie Benutzereingaben an ein Webserver-Skript übergeben werden können, das das gleiche Ergebnis zurücksendet und wir es drucken.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

Hier ist der Code geschrieben result.php Skript -

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

Jetzt können Sie einen beliebigen Text in das angegebene Eingabefeld eingeben und dann auf die Schaltfläche "Ergebnis anzeigen" klicken, um zu sehen, was Sie in das Eingabefeld eingegeben haben.

JQuery AJAX-Methoden

Sie haben das Grundkonzept von AJAX mit JQuery gesehen. In der folgenden Tabelle sind alle wichtigen JQuery AJAX-Methoden aufgeführt, die Sie je nach Programmierbedarf verwenden können.

Sr.Nr.	Methoden & Beschreibung
1	jQuery.ajax (Optionen) Laden Sie eine Remote-Seite mithilfe einer HTTP-Anforderung.
2	jQuery.ajaxSetup (Optionen) Richten Sie globale Einstellungen für AJAX-Anforderungen ein.
3	jQuery.get (URL, [Daten], [Rückruf], [Typ]) Laden Sie eine Remote-Seite mithilfe einer HTTP-GET-Anforderung.
4	jQuery.getJSON (URL, [Daten], [Rückruf]) Laden Sie JSON-Daten mithilfe einer HTTP-GET-Anforderung.
5	jQuery.getScript (URL, [Rückruf]) Lädt eine JavaScript-Datei und führt sie mithilfe einer HTTP-GET-Anforderung aus.
6	jQuery.post (URL, [Daten], [Rückruf], [Typ]) Laden Sie eine Remote-Seite mithilfe einer HTTP-POST-Anforderung.
7	Laden (URL, [Daten], [Rückruf]) Laden Sie HTML aus einer Remote-Datei und fügen Sie es in das DOM ein.
8	serialize () Serialisiert eine Reihe von Eingabeelementen in eine Datenfolge.
9	serializeArray () Serialisiert alle Formulare und Formularelemente wie die .serialize () -Methode, gibt jedoch eine JSON-Datenstruktur zurück, mit der Sie arbeiten können.

JQuery AJAX-Ereignisse

Sie können verschiedene JQuery-Methoden während des Lebenszyklus des AJAX-Aufruffortschritts aufrufen. Basierend auf verschiedenen Ereignissen / Phasen stehen folgende Methoden zur Verfügung:

Sie können alle AJAX-Ereignisse durchgehen .

Sr.Nr.	Methoden & Beschreibung
1	ajaxComplete (Rückruf) Fügen Sie eine Funktion hinzu, die ausgeführt werden soll, wenn eine AJAX-Anforderung abgeschlossen ist.
2	ajaxStart (Rückruf) Fügen Sie eine Funktion hinzu, die ausgeführt werden soll, wenn eine AJAX-Anforderung beginnt und keine bereits aktiv ist.
3	ajaxError (Rückruf) Fügen Sie eine Funktion hinzu, die ausgeführt werden soll, wenn eine AJAX-Anforderung fehlschlägt.
4	ajaxSend (Rückruf) Fügen Sie eine Funktion hinzu, die ausgeführt werden soll, bevor eine AJAX-Anforderung gesendet wird.
5	ajaxStop (Rückruf) Fügen Sie eine Funktion hinzu, die ausgeführt werden soll, wenn alle AJAX-Anforderungen beendet wurden.
6	ajaxSuccess (Rückruf) Fügen Sie eine Funktion hinzu, die ausgeführt werden soll, wenn eine AJAX-Anforderung erfolgreich abgeschlossen wurde.