Techie Zone

Prototype ist das am häufigsten verwendete Framework für Ajax Operation. Der Hauptvorteil der Verwendung von Ajax Framework Prototype ist seine Einfachheit zu verwenden, automatisch implementiert Cross-Browser und bietet Bündel von Utility-Funktion, die in Ihren JavaScript-Code verwendet werden kann. Dieser Artikel listet nach verschiedenen Möglichkeiten, mit denen man Ajax machen kann Anruf mit Prototype Framework. Dieses Tutorial nicht in der detaillierten Umsetzung gehen, sondern zeigt Ihnen, wie wir grundlegende Ajax-Aufruf kann mit Ajax Framework Prototype.

In Prototype gibt es drei Möglichkeiten, wie Sie Ajax Anrufe tätigen können.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Bevor wir in das Lernen der einzelnen Ajax bewegen nennen wir müssen auch die verschiedenen Veranstaltungen und Parameter bekommen, während womit Ajax Call genutzt verstehen.

Verschiedene Parameter des Objekts Ajax.Request Passed zu:
Methode
Dies kann HTTP GET-oder HTTP-POST werden. Durch die Standard-Methode definiert ist POST.

Parameter
Dies ist der Schlüssel-Wert-Paar der Daten, die wir auf den Antrag Seite übergeben werden. Dies ist die gleiche Daten, die wir durch die Abfrage-String, während Remote-URL aufrufen.

Frequenz
Hier geben Sie die Zeit in Sekunden wobei Ajax-Aufruf getätigt werden.

Verfall
Diese wird verwendet, um das Intervall Zeit für Ajax zu erhöhen nennen, wenn es keine Änderung der Reaktion. Die Höhe des Intervalls immer wird die Frequenz erhöht * Verfall. Diese gewährleisten, dass wir nicht unnötig machen Ajax-Aufruf für die gleiche Antwort bekommen von dem Server.

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

onSuccess:
Dieses Ereignis aufgerufen, wenn der Antrag vollständig und der Statuscode zurückgegeben wird, ist in 2xx Serie.

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

onComplete:
Dieses Ereignis aufgerufen, wenn der Antrag vollständig und die Verbindung Anfrage Lebenszyklus abgeschlossen ist. Dieses Ereignis wird nach onSuccess und onFailure Ereignis aufgerufen. In diesem Fall haben wir normalerweise verbergen, die Lade Bild.

Reading Request Response:
Mit Prototyp Rahmen kann man lesen, entweder String, XML und JSON-Inhalt. String-Inhalte können durch Aufruf responseText Methode gelesen werden, XML-Inhalte durch den Aufruf responseXML und JSON-Inhalte durch den Aufruf responseJSON Methode gelesen werden können gelesen werden können.

Ajax.Request:
Hier machen wir einen einzigen Ajax-Request zu einem Server-Seite und nach Erhalt der Antwort vom Server die Verbindung beendet wird. Die einfache Implementierung 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, (Methode: 'POST', Parameter: (Betrieb: "readRecord"), OnCreate: Funktion (Verkehrs-) (alert ("Creating New Ajax Call");), onSuccess: function (transport) (var serverResponse = Transport. responseText;), onFailure: function (response) (alert ("Einige Fehler beim Tätigen eines Anrufs zu Remote-Server ");))); 

Hier machen wir ein Objekt der Ajax.Request. Diese Objekte akzeptiert 2 Parameter der erste Parameter ist die Anfrage-URL und ein anderes Objekt, das die wesentlichen Informationen, die wir werden das Senden / Empfangen von der Server-Seite hält. Bei erfolgreichem Empfang der Daten aus der angeforderte Seite lesen wir die Daten durch 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, (
		 , Methode: 'POST',
		 , Frequenz: 3,
                 Karies: 2
          )); 

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

Ajax.Updater:
Der einzige Unterschied zwischen Ajax.Request und Ajax.Updater ist, dass wir das in Ajax.Updater DIV / SPAN Kontrolle Namen, sodass nun die Daten vom Server zurückgegeben werden, werden automatisch innerhalb des DIV / SPAN steuern, wann der Vorgang abgeschlossen aktualisiert angeben.

  "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 akzeptiert 3 Parameter der erste Parameter ist der Name des DIV / SPAN, wo die Daten aktualisiert bekommen, zweite Parameter enthält die Anfrage-URL und dritte Parameter enthält ein Objekt, das die wesentlichen Informationen, die wir werden das Senden / Empfangen von dem Server hat page.

Beispiel:
In diesem Beispiel bin ich für alle der 3 Ajax-Aufruf Umsetzung.

HTML-Code:

  <html>
	 <head>
		 <title> Prototype Ajax-Aufruf </ title>
		 <script type="text/javascript" src="js/prototype.js"> </ script>
		 <script type="text/javascript">
			 Funktion AjaxRequest () (
				 var url = "/ uploads / ajax_time.php";
				 var = new ajaxObjhttp Ajax.Request (url, (
					 Methode: 'POST',
					 Parameter: (Betrieb: "readRecord")
			                 OnCreate: function (transport) (
			        	        alert ("Creating New Ajax Call");
			                 )
			                 onSuccess: function (transport) (
			        		 var textBoxObj = document.getElementById ("ajaxRequestCall");
			                         textBoxObj.innerHTML = transport.responseText;
			                 )
			                 onFailure: function (response) (
			                        alert ("Einige Fehler beim Tätigen eines Anrufs auf Remote-Server");
			                )
			         ));  
			 )

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

			 Funktion ajaxPeriodicUpdater () (
				 var url = "/ uploads / ajax_time.php";
				 var textBoxObj = "ajaxPeriodicUpdaterCall";
				 var = new ajaxObjhttp Ajax.PeriodicalUpdater (textBoxObj, url, (
					 Methode: '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 Periodische Updater: <span id="ajaxPeriodicUpdaterCall" name="ajaxPeriodicUpdaterCall" style="border: 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxPeriodicUpdater () ; "value =" Ajax Periodische Updater "/> <br />	
	 </ Body>
 </ Html> 

Server-seitigen Code (PHP):

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

Server-seitigen Code (JSP):

  "java.util.Date" %> <% @ Page import = "java.util.Date"%>
 <%
	 new Date ( ) ; Datum currentDate = new Date ();
	 getTime ( ) ; lang = currentTime currentDate. getTime ();
	 currentTime ) ; out. println (currentTime);
 %> 

Da pro Benutzer Arbeitsumgebung des Anwenders, ob PHP oder JAVA Ich habe die Server-seitigen Code für die Sprache geschrieben. Der Benutzer muss lediglich die URL in der JavaScript-Code zu ändern.

Benutzerdefinierte Suche

Beliebte Artikel:

• Ajax-Programmierung
• Überprüfen Session Timeout beim Ajax-Aufruf
• Common Mistakes AJAX-Programmierung
• FAQ auf AJAX-Technologie
• Ajax-Programmierung