Technikfreaks Zone

Prototyp ist die am weitesten verbreitete Framework für Ajax Operation. Der wesentliche Vorteil der Verwendung von Prototype Ajax Framework ist seine Einfachheit zu verwenden, automatisch implementiert Cross-Browser und bietet Bündel von Utility-Funktion, die in Ihrem JavaScript-Code verwendet werden kann. Dieser Artikel listet Festlegung verschiedenen Wege, auf denen Sie können Ajax-Aufruf mit Prototype Framework. Dieses Tutorial nicht in der detaillierten Umsetzung gehen, sondern zeigt Ihnen, wie können wir grundlegende Ajax-Aufruf nicht mit Prototype Ajax Framework.

Im Prototyp gibt es drei Möglichkeiten, wie Sie Ajax Anrufe tätigen.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Bevor wir fortfahren in das Lernen der einzelnen Ajax-Aufruf müssen wir auch die verschiedenen Ereignisse und Parameter zu verstehen, während gewöhnungsbedürftig macht Ajax-Aufruf.

Verschiedene Parameter des Objekts, auf Ajax.Request Passed:
Methode
Dies kann HTTP GET oder HTTP POST. Standardmäßig definierte Methode POST ist.

Parameter
Dies ist der Schlüssel-Wert-Paar der Daten, werden wir den Antrag Seite zu übergeben. Dies ist die gleiche Daten, die wir durch die Abfrage-Zeichenfolge beim Aufruf entfernter URL.

Frequenz
Hier können Sie den Zeitraum angeben, in Sekunden, wobei Ajax-Aufruf gemacht werden.

Verfall
Diese wird verwendet, um die Intervallzeit für Ajax-Aufruf zu erhöhen, wenn es keine Änderung der Reaktion. Die Höhe der Pause gewinnt zunehmend die Frequenz * Verfall. Dies stellt sicher, dass wir keine unnötigen Ajax-Aufruf machen für die gleiche Antwort bekommen von dem Server.

Prototype Ajax Veranstaltungen:
OnCreate:
Dieses Ereignis aufgerufen werden, wenn eine neue Ajax-Request-Anruf getätigt wird. Dies ist nützlich, wenn wir wollen ein Bild geladen Angabe Ajax-Aufruf zeigen.

onSuccess:
Dieses Ereignis aufgerufen werden, wenn der Antrag vollständig ist und den Status-Code zurückgegeben wird, in 2xx Serie.

onFailure:
Dieses Ereignis aufgerufen werden, wenn der Antrag vollständig ist und den Status-Code zurückgegeben wird, nicht in 2xx Serie.

onComplete:
Dieses Ereignis aufgerufen werden, wenn der Antrag vollständig ist und die Verbindung Anfrage Lebenszyklus abgeschlossen ist. Dieses Ereignis wird nach onSuccess und onFailure-Ereignis aufgerufen. In diesem Fall, dass wir normalerweise verbergen, die beim Laden des Bildes.

Reading Anfrage Antwort:
Mit Prototyp Rahmen lesen wir entweder String, XML und JSON Inhalt. String-Inhalte können durch den Aufruf responseText Methode gelesen werden, kann durch den Aufruf von XML-Inhalten responseXML und JSON-Inhalte können durch den Aufruf responseJSON Methode gelesen werden gelesen werden.

Ajax.Request:
Hier machen wir einen einzigen ajax Aufforderung zur Abgabe eines Server-Seite und nach Erhalt der Antwort vom Server die Verbindung beendet wird. Die einfache Anwendung für die gleiche ist

	 "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var ajaxObjhttp = new Ajax. Request ( url , { method : 'POST' , parameters : { operation : "readRecord" } , onCreate : function ( transport ) { alert ( "Creating New Ajax Call" ) ; } , onSuccess : function ( transport ) { var serverResponse = transport. responseText ; } , onFailure : function ( response ) { alert ( "Some error occured while making call to remote server" ) ; } } ) ; var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php" var ajaxObjhttp = new Ajax. Request (url, (method: 'POST', parameters: (Betrieb: "readRecord"), OnCreate: Funktion (Verkehrs-) (alert ( "Entwicklung des neuen Ajax-Call");), onSuccess: function (transport) (var serverResponse = Transport. responseText;), onFailure: function (response) (alert ( "Ein Fehler trat beim Aufruf machen Remote-Server ");))); 

Hier machen wir ein Objekt der Ajax.Request. Diese Objekte akzeptiert 2 Parameter der erste Parameter ist die Anfrage-URL und ein weiteres Objekt, das die wesentlichen Informationen, die wir senden werden / Empfangen von der Server-Seite enthält. Bei erfolgreichem Empfang der Daten aus dem die angeforderte Seite lesen wir die Daten durch den Aufruf responseText Methode.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	 new Ajax. PeriodicalUpdater ( "textobj" , url , { var ajaxObjhttp = new Ajax. PeriodicalUpdater ( "textobj", url, (
		 , method: 'POST',
		 , Frequenz: 3,
                 Karies: 2
          )); 

Hier machen wir ein Objekt der Ajax.PeriodicalUpdaterRequest. Diese Objekte nimmt 3 Parameter der erste Parameter ist der Name des DIV / SPAN steuern, wo die Daten aktualisiert bekommen, hält zweite Parameter der Anfrage-URL und dritte Parameter enthält ein Objekt, das die wesentlichen Informationen, die wir senden werden / Empfangen von der hat Server-Seite.

Ajax.Updater:
Der einzige Unterschied zwischen Ajax.Request und Ajax.Updater ist, dass wir die Ajax.Updater DIV angeben / SPAN Kontrolle Namen, sodass nun die Daten vom Server zurückgegeben wird, wird automatisch in den Stand zu erhalten DIV / SPAN steuern, wann der Vorgang abgeschlossen ist.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	 new Ajax. Updater ( "textobj" , url , { var ajaxObjhttp = new Ajax. Updater ( "textobj", url, (
		 operation : "readRecord" } Parameter: (Betrieb: "readRecord")
         )); 

Hier machen wir ein Objekt der Ajax.Updater. Diese Objekte nimmt 3 Parameter der erste Parameter den Namen des DIV / SPAN, wo die Daten aktualisiert bekommen, hält zweite Parameter der Anfrage-URL und dritte Parameter enthält ein Objekt, das die wesentlichen Informationen, die wir senden werden / Empfangen von dem Server Seite.

Beispiel:
In diesem Beispiel bin ich, die alle 3 Ajax-Aufruf Umsetzung.

HTML-Code:

  <html>
	 <head>
		 <title> Prototype Ajax Call </ title>
		 <script type="text/javascript" src="js/prototype.js"> </ script>
		 <script type="text/javascript">
			 Funktion AjaxRequest () (
				 var url = "/ uploads / ajax_time.php";
				 var ajaxObjhttp = new Ajax.Request (url, (
					 method: 'POST',
					 Parameter: (Betrieb: "readRecord"),
			                 OnCreate: function (transport) (
			        	        alert ( "Entwicklung des neuen Ajax-Call");
			                 ),
			                 onSuccess: function (transport) (
			        		 var textBoxObj = document.getElementById ( "ajaxRequestCall");
			                         textBoxObj.innerHTML = transport.responseText;
			                 ),
			                 onFailure: function (response) (
			                        alert ( "Ein Fehler trat beim Aufruf machen Remote-Server");
			                )
			         ));  
			 )

    		         Funktion ajaxUpdater () (
				 var url = "/ uploads / ajax_time.php";
				 var textBoxObj = "ajaxUpdaterCall";
				 var ajaxObjhttp = new Ajax.Updater (textBoxObj, url, (
					 method: 'POST'
	    		         ));  
			  )

			 Funktion ajaxPeriodicUpdater () (
				 var url = "/ uploads / ajax_time.php";
				 var textBoxObj = "ajaxPeriodicUpdaterCall";
				 var ajaxObjhttp = new Ajax.PeriodicalUpdater (textBoxObj, url, (
					 method: 'POST',
					 Frequenz: 3,
	        		         Karies: 2
	    		         ));   	
			 )
		 </ script>
	 </ head>
             <body>
		 Ajax Request: <span id="ajaxRequestCall" name="ajaxRequestCall" style="border: 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "AjaxRequest (); "value =" Ajax Request "/> <br /> <br />		
	 Ajax Updater: <span id="ajaxUpdaterCall" name="ajaxUpdaterCall" style="border: 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxUpdater (); "value =" Ajax Updater "/> <br /> <br />	
	 Ajax Periodic Updater: <span id="ajaxPeriodicUpdaterCall" name="ajaxPeriodicUpdaterCall" style="border: 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxPeriodicUpdater () ; "value =" Ajax Periodic Updater "/> <br />	
	 </ body>
 </ html> 

Server-seitigen Code (PHP):

  <?
	 ( "H:i:s" ) ; echo date ( "H: i: s");
 ?> 

Server-seitigen Code (JSP):

 "java.util.Date" %> < % Date currentDate = new Date ( ) ; long currentTime = currentDate . getTime ( ) ; out . println ( currentTime ) ; %> <% @ Page import = "java.util.Date"%> <% currentDate Datum = new Date (); lange currentTime = currentDate. GetTime (); aus. Println (currentTime);%> 

Nach Benutzer Arbeitsumfeld der Nutzer entscheiden, ob PHP oder JAVA ich die Server-seitigen Code geschrieben haben, sowohl für die Sprache. Der Benutzer muss lediglich die URL in der JavaScript-Code zu ändern.

Benutzerdefinierte Suche

Beliebte Artikel:

• HTTP-POST Request Form mit AJAX-und Servlet
• Wie AJAX Works
• FORM POST in PHP mit AJAX
• FAQ auf AJAX-Technologie
• Ajax-Programmierung mit JSP und Servlets