Techneut Zone

Prototype is de meest gebruikte framework voor Ajax operatie. Het belangrijkste voordeel van het gebruik van Prototype Ajax Framework is de eenvoud van gebruik, implementeert automatisch cross-browser en het biedt bundel nutsfunctie die gebruikt kunnen worden in uw JavaScript-code. Dit artikel geeft een lijst van verschillende manieren waarop u kunt bellen met behulp van Prototype Ajax Framework. Deze tutorial gaat niet in gedetailleerde uitvoering, maar laat u zien hoe we kunnen doen met behulp van elementaire Ajax Call Prototype Ajax Framework.

In Prototype zijn er drie manieren waarop u kunt oproepen Ajax.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Voordat we verhuizen naar het leren van de individuele Ajax oproep die wij moeten ook de verschillende evenementen en parameters wennen terwijl het Ajax-oproep te kunnen verstaan.

Verschillende parameters van het object Doorgegeven aan Ajax.Request:
methode
Dit kan HTTP GET-of HTTP POST worden. Door gedefinieerd standaard methode is POST.

parameters
Dit is de sleutel-waarde paar van de gegevens die we gaan geven aan het verzoek pagina. Dit is dezelfde gegevens die we doorgeven via de query string, maar drong wel externe URL.

frequentie
Hier specificeert u de periode in seconden waarin Ajax oproep zal worden gedaan.

verval
Deze wordt gebruikt om de tijdsinterval voor Ajax te verhogen bellen als er geen verandering in de reactie. Het bedrag van de interval krijgen is de frequentie verhoogd * verval. Deze zorgen dat we geen onnodige Ajax oproep tot hetzelfde antwoord krijgt van de server te maken.

Prototype Ajax Evenementen:
onCreate:
Dit evenement gecalled wanneer een nieuwe ajax verzoek gesprek plaatsvindt. Dit is handig wanneer we willen een laad-beeld ajax oproep weer te geven.

onSuccess:
Dit evenement krijgt aangeroepen wanneer de aanvraag volledig is en de status-code wordt teruggegeven in de 2xx-serie.

onFailure:
Dit evenement krijgt aangeroepen wanneer de aanvraag volledig is en het geretourneerde statuscode is niet in 2xx serie.

onComplete:
Dit evenement krijgt aangeroepen wanneer de aanvraag volledig is en de verbinding verzoek levenscyclus is voltooid. Dit evenement wordt aangeroepen na onSuccess en onFailure evenement. In dit geval hebben we normaal gesproken verbergen laden van de afbeelding.

Lezen Aanvraag Reactie:
Met prototype kader waarin we kunnen lezen ofwel String, XML en JSON inhoud. String inhoud kan worden gelezen door te bellen ResponseTekst methode, XML-inhoud kan worden gelezen door te bellen naar responseXML en JSON inhoud kan worden gelezen door te bellen naar responseJSON methode.

Ajax.Request:
Hier maken we een enkele ajax verzoek om een server pagina en na ontvangst van de reactie van de server de verbinding wordt verbroken. De eenvoudige uitvoering is voor dezelfde

	 "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 = nieuwe Ajax. Request (url, (method: 'post', parameters: (operatie: "readRecord"), onCreate: functie (transport) (alert ("Het creëren van nieuwe Ajax-Call");), onSuccess: function (transport) (var = serverResponse vervoer. ResponseTekst;), onFailure: function (respons) (alert ("Sommige fout is opgetreden tijdens het bellen remote server ");))); 

Hier maken we een object van Ajax.Request. Deze objecten accepteert 2 parameters de eerste parameter is het verzoek pagina url en een ander object dat de essentiële informatie die we zullen / van de server ontvangt pagina sturen houdt. Na succesvolle ontvangst van de gegevens van de opgevraagde pagina lezen we de gegevens door te bellen naar ResponseTekst 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 nieuwe Ajax. PeriodicalUpdater ("textobj", url, (
		 , methode: 'post',
		 , frequentie: 3,
                 verval: 2
          )); 

Hier maken we een object van Ajax.PeriodicalUpdaterRequest. Deze objecten accepteert de eerste parameter 3 paramter is de naam van de DIV / SPAN controle waar de gegevens zullen worden ge-update, tweede parameter bevat het verzoek URL en derde parameter bezit is van een object dat de essentiële informatie die we zullen / ontvangst van de te verzenden is Server Page.

Ajax.Updater:
Het enige verschil tussen Ajax.Request en Ajax.Updater is dat in Ajax.Updater specificeren we de DIV / SPAN controle op naam, zodat nu de gegevens terug van de server krijgt automatisch bijgewerkt in de DIV / SPAN controle bij de operatie is voltooid.

  "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 nieuwe Ajax. Updater ("textobj", url, (
		 operation : "readRecord" } parameters: (operatie: "readRecord")
         )); 

Hier maken we een object van Ajax.Updater. Deze objecten accepteert drie parameter de eerste parameter is de naam van de DIV / SPAN waar de gegevens zullen worden ge-update, tweede parameter bevat het verzoek URL en de derde parameter bevat een object dat de essentiële informatie die we zullen / ontvangen van de server te verzenden is pagina.

Voorbeeld:
In dit voorbeeld ben ik over alle drie Ajax oproep uitvoering.

HTML Code:

  <html>
	 <head>
		 <title> Prototype Ajax Bellen </ title>
		 <script type="text/javascript" src="js/prototype.js"> </ script>
		 <script type="text/javascript">
			 ajaxRequest functie () (
				 var url = "/ uploads / ajax_time.php";
				 var = new ajaxObjhttp Ajax.Request (url, (
					 methode: 'post',
					 parameters: (operatie: "readRecord"),
			                 onCreate: function (transport) (
			        	        alert ("Het creëren van nieuwe Ajax-Call");
			                 ),
			                 onSuccess: function (transport) (
			        		 var textBoxObj = document.getElementById ("ajaxRequestCall");
			                         textBoxObj.innerHTML = transport.responseText;
			                 ),
			                 onFailure: function (respons) (
			                        alert ("Sommige fout is opgetreden tijdens het gesprek met server op afstand");
			                )
			         ));  
			 )

    		         ajaxUpdater functie () (
				 var url = "/ uploads / ajax_time.php";
				 textBoxObj var = "ajaxUpdaterCall";
				 var = new ajaxObjhttp Ajax.Updater (textBoxObj, url, (
					 methode: 'post'
	    		         ));  
			  )

			 ajaxPeriodicUpdater functie () (
				 var url = "/ uploads / ajax_time.php";
				 textBoxObj var = "ajaxPeriodicUpdaterCall";
				 var = new ajaxObjhttp Ajax.PeriodicalUpdater (textBoxObj, url, (
					 methode: 'post',
					 frequentie: 3,
	        		         verval: 2
	    		         ));   	
			 )
		 </ Script>
	 </ Head>
             <body>
		 Ajax Verzoek: <span style="border: id="ajaxRequestCall" name="ajaxRequestCall" 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxRequest (); "value =" Ajax Request "/> <br /> <br />		
	 Ajax Updater: <span style="border: id="ajaxUpdaterCall" name="ajaxUpdaterCall" 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxUpdater (); "value =" Ajax Updater "/> <br /> <br />	
	 Ajax Periodieke Updater: <span style="border: id="ajaxPeriodicUpdaterCall" name="ajaxPeriodicUpdaterCall" 1px solid #CCCCCC"> </ span> <input type = "button" onClick = "ajaxPeriodicUpdater () ; "value =" Ajax Periodiek Updater "/> <br />	
	 </ Body>
 </ Html> 

Server Side CODE (PHP):

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

Server Side CODE (JSP):

  "java.util.Date" %> <% @ Page import = "java.util.Date"%>
 <%
	 new Date ( ) ; Datum CURRENTDATE = new Date ();
	 getTime ( ) ; lange currentTime = CURRENTDATE. getTime ();
	 currentTime ) ; uit. println (currentTime);
 %> 

Zoals per gebruiker de werkomgeving van de gebruiker of PHP of JAVA Ik heb de server side code geschreven voor zowel de taal. De gebruiker heeft alleen de URL wijzigen in de JavaScript-code.

Custom Search

Populaire artikelen:

• Hoe te bellen sequentiële ajax
• AJAX Demo
• AJAX-programmering
• HTTP POST-aanvraag-formulier met behulp van AJAX en Servlet
• Veelgestelde vragen over AJAX-technologie
• Gemeenschappelijk AJAX programmeer fouten
• Hoe werkt AJAX
• Controle van Time-out sessie tijdens Ajax-Call
• HTTP POST VORM in PHP met behulp van AJAX
• Ajax Tutorials - Wat is AJAX