Techie Zona

Prototype è il quadro più ampiamente usato per Ajax Operazione. Il vantaggio principale di usare Prototype Ajax Framework è la sua semplicità di utilizzo, implementa automaticamente cross-browser e offre fascio di funzione di utilità che può essere utilizzato nel codice JavaScript. Questo articolo stabilisce lista vari modi in cui è possibile effettuare chiamate utilizzando Ajax Prototype Framework. Questo tutorial non va in attuazione dettagliate, ma vi mostra come si possa fare di base Ajax Chiamare tutti con Prototype Ajax Framework.

In Prototype ci sono tre modi è possibile effettuare chiamate Ajax.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Prima di procedere verso la formazione permanente dei singoli chiamata Ajax abbiamo bisogno anche di capire i vari eventi e parametri abituando rendendo Ajax Call.

Vari parametri del l'oggetto passato di Ajax.Request:
metodo
Questo può essere HTTP GET o HTTP POST. Con metodo predefinito definito è POST.

parametri
Questo contiene la coppia chiave-valore dei dati che stiamo per passare alla pagina richiesta. Si tratta degli stessi dati che si passa attraverso la stringa di query URL remoto durante la chiamata.

frequenza
Qui potete specificare il tempo in secondi in cui chiamata Ajax sarà fatto.

decadimento
Questo è usato per aumentare l'intervallo di tempo di Ajax chiamata se non vi è alcun cambiamento nella risposta. La quantità di intervallo di ottenere maggiore è il decadimento * frequenza. Questo sì che non facciamo inutili chiamata Ajax per ottenere la stessa risposta dal server.

Prototype Ajax Eventi:
onCreate:
Questo evento vengono chiamati ogni volta che un nuovo invito di chiamata ajax è fatto. Questo è utile quando si vuole mostrare una immagine che indica il caricamento chiamata AJAX.

onSuccess:
Questo evento vengono chiamati ogni volta che la richiesta è completa e il codice di stato restituito si trova in serie 2xx.

onFailure:
Questo evento vengono chiamati ogni volta che la richiesta è completa e il codice di stato restituito non è in serie 2xx.

onComplete:
Questo evento vengono chiamati ogni volta che la richiesta è completa e la richiesta di connessione del ciclo di vita è completo. Questo evento viene chiamato dopo onSuccess ed evento onFailure. In questo evento che di solito nascondere l'immagine di caricamento.

Lettura della risposta richiesta:
Con quadro prototipo si può leggere sia String, XML e JSON contenuto. String contenuto può essere letto chiamando il metodo responseText, il contenuto XML può essere letto da chiamare responseXML JSON e il contenuto può essere letto da chiamando il metodo responseJSON.

Ajax.Request:
Qui effettuare una sola richiesta ajax ad una pagina server e dopo aver ricevuto la risposta dal server la connessione viene terminata. La semplice applicazione per lo stesso è

	 "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" ) ; } } ) ; url var = "http://www.hiteshagrawal.com/uploads/ajax_time.php"; ajaxObjhttp var = new Ajax. Request (url, (method: 'POST', i parametri: (operazione: "readRecord"), onCreate: funzione (trasporto) (alert ("Creare nuove Ajax Call");), onSuccess: funzione (trasporto) (var = serverResponse trasporto. responseText;), onFailure: funzione (risposta) (alert ("qualche errore durante la creazione chiamata a server remoto ");))); 

Qui si fanno un oggetto di Ajax.Request. Questo oggetti accetta 2 parametri il primo parametro è l'URL della pagina richiesta e un altro oggetto che contiene le informazioni essenziali che ci sarà l'invio / ricezione dalla pagina server. Il successo che riceve i dati dalla pagina richiesta leggiamo i dati chiamando il metodo responseText.

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

Qui si fanno un oggetto di Ajax.PeriodicalUpdaterRequest. Questo oggetti accetta 3 il parametro Parametro primo è il nome del DIV / SPAN controllo in cui i dati viene aggiornata, secondo parametro contiene l'URL richiesta e terzo parametro contiene un oggetto che ha le informazioni essenziali che ci sarà l'invio / ricezione dal Server Page.

Ajax.Updater:
L'unica differenza tra Ajax.Request e Ajax.Updater è che in noi Ajax.Updater specificare il DIV / SPAN nome di controllo così ora i dati restituiti dal server otterrà automaticamente aggiornate nel rispetto DIV / SPAN controllo al completamento dell'operazione.

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

Qui si fanno un oggetto di Ajax.Updater. Questo oggetti accetta tre parametri il primo parametro è il nome del DIV / SPAN in cui i dati viene aggiornata, secondo parametro contiene l'URL richiesta e terzo parametro contiene un oggetto che ha le informazioni essenziali che ci sarà l'invio / ricezione dal server pagina.

Esempio:
In questo esempio io sono relativi a tutti i 3 Attuazione chiamata Ajax.

HTML Code:

  <html>
	 <head>
		 <title> Prototype Ajax Call </ title>
		 <script type="text/javascript" src="js/prototype.js"> </ script>
		 <script type="text/javascript">
			 ajaxRequest funzione () (
				 var url = "/ uploads / ajax_time.php";
				 ajaxObjhttp var = new Ajax.Request (url, (
					 metodo: 'POST',
					 parametri: (operazione: "readRecord"),
			                 onCreate: funzione (trasporto) (
			        	        alert ("Creare nuove Ajax Call");
			                 ),
			                 onSuccess: funzione (trasporto) (
			        		 textBoxObj var = document.getElementById ("ajaxRequestCall");
			                         transport.responseText textBoxObj.innerHTML =;
			                 ),
			                 onFailure: funzione (risposta) (
			                        alert ("qualche errore durante la creazione di chiamata al server remoto");
			                )
			         ));  
			 )

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

			 ajaxPeriodicUpdater funzione () (
				 var url = "/ uploads / ajax_time.php";
				 textBoxObj var = "ajaxPeriodicUpdaterCall";
				 ajaxObjhttp var = new Ajax.PeriodicalUpdater (textBoxObj, url, (
					 metodo: 'POST',
					 frequenza: 3,
	        		         decadimento: 2
	    		         ));   	
			 )
		 </ Script>
	 </ Head>
             <body>
		 Ajax Richiesta: name="ajaxRequestCall" id="ajaxRequestCall" <span style="border: 1px <#CCCCCC"> solido / span> tipo di ingresso <= "" onClick pulsante = "ajaxRequest (); "value =" Ajax Request "/> <br /> <br />		
	 Ajax Updater: name="ajaxUpdaterCall" id="ajaxUpdaterCall" <span style="border: 1px <#CCCCCC"> solido / span> tipo di ingresso <= "" pulsante onClick = "ajaxUpdater (); "value =" Ajax Updater "/> <br /> <br />	
	 Ajax periodica Updater: name="ajaxPeriodicUpdaterCall" id="ajaxPeriodicUpdaterCall" <span style="border: 1px <#CCCCCC"> solido / span> tipo di ingresso <= "" pulsante onClick = "ajaxPeriodicUpdater () ; "value =" Ajax periodica Updater "/> <br />	
	 </ Body>
 </ Html> 

CODICE SERVER SIDE (PHP):

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

CODICE SERVER SIDE (JSP):

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

Come per ogni utente dell'ambiente di lavoro dell'utente se PHP o JAVA che ho scritto il codice lato server sia per la lingua. L'utente deve solo cambiare l'url nel codice javascript.

Custom Search

Articoli popolari:

• Tutorial Ajax - Che cosa è AJAX
• Controllo di seduta TimeOut durante Ajax Call
• Programmazione Ajax utilizzando Prototype Framework
• AJAX Demo
• FAQ sulla tecnologia AJAX