Techie Zona

Prototype é o quadro mais amplamente utilizado para a Operação Ajax. A principal vantagem de usar Prototype Ajax Framework é sua simplicidade de uso, automaticamente implementa cross-browser e oferece pacote de função de utilidade que pode ser usado em seu código JavaScript. Este artigo lista as várias maneiras pelas quais você pode fazer chamada usando Prototype Ajax Framework. Este tutorial não entrarei em normas de execução, mas mostra como podemos fazer de base do Ajax usando Prototype Call Ajax Framework.

Em Prototype, existem três maneiras que você pode fazer chamadas Ajax.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Antes de passarmos para a aprendizagem de cada chamada Ajax também precisamos entender os vários eventos e parâmetros acostumando ao fazer chamadas Ajax.

Vários parâmetros do objeto passado para Ajax.Request:
método
Isso pode ser HTTP GET ou HTTP POST. Pelo método padrão definido é POST.

parâmetros
Isto prende o par chave-valor dos dados que vamos passar para a página de solicitação. Este é os mesmos dados que passamos a string de consulta durante uma chamada URL remoto.

freqüência
Aqui você especifica o período em segundos onde a chamada Ajax será feita.

decadência
Isto é usado para aumentar o tempo de intervalo para o Ajax chamar se não houver nenhuma mudança na resposta. A quantidade de intervalo ficando maior é a decadência * freqüência. Isto garante que não fazer a chamada Ajax desnecessário para obter a mesma resposta do servidor.

Eventos Prototype Ajax:
OnCreate:
Este evento são chamados sempre que um novo pedido de chamada ajax é feito. Isso é útil quando queremos mostrar uma imagem de carga, indicando chamada ajax.

onSuccess:
Este evento são chamados sempre que o pedido está completo eo código de status retornado está na série 2xx.

onFailure:
Este evento são chamados sempre que o pedido está completo eo código de status retornado não está na série 2xx.

onComplete:
Este evento são chamados sempre que o pedido está completo ea conexão ciclo de vida do pedido está completo. Este evento é chamado depois onSuccess e eventos onFailure. Neste caso, nós normalmente ocultar a imagem de carregamento.

Leitura de resposta ao pedido:
Com quadro protótipo podemos ler ou String, XML e JSON conteúdo. String conteúdo pode ser lido por chamando o método responseText, o conteúdo XML pode ser lido chamando responseXML e conteúdo JSON pode ser lido por chamando o método responseJSON.

Ajax.Request:
Aqui fazemos um único pedido ajax em uma página do servidor e depois de receber a resposta do servidor a conexão é finalizada. A aplicação simples para o mesmo

	 "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 "; ajaxObjhttp var Ajax = novo. Request (url, o método (: 'POST', os parâmetros: (operação:" readRecord) ", OnCreate: (função de transporte) (alert ("Criação de um novo Call Ajax");), onSuccess: função de transporte () (var = serverResponse transporte. responseText;), onFailure: function resposta () (alert ("Ocorreu um erro ao fazer o convite para servidor remoto ");))); 

Aqui fazemos um objeto de Ajax.Request. Este parâmetro dois objetos aceita o primeiro parâmetro é a URL da página de pedido e outro objeto que contém as informações essenciais que estaremos enviando / recebendo a partir da página do servidor. Na bem-sucedida que recebe os dados da página requisitada, lemos os dados chamando o método responseText.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = http://www.hiteshagrawal.com/uploads/ajax_time.php ";
	 new Ajax. PeriodicalUpdater ( "textobj" , url , { ajaxObjhttp var Ajax = novo. PeriodicalUpdater ("textobj", url, (
		 , método: "POST",
		 , Freqüência: 3
                 decadência: 2
          )); 

Aqui fazemos um objeto de Ajax.PeriodicalUpdaterRequest. Esta objetos aceita 3 o parâmetro Parâmetro primeiro é o nome da DIV controle SPAN / onde os dados serão atualizados, segundo parâmetro contém o URL da solicitação e terceiro parâmetro contém um objeto que tem a informação essencial que irá enviar / receber do página do servidor.

Ajax.Updater:
A única diferença entre Ajax.Request e Ajax.Updater é que nós Ajax.Updater especificar o DIV / SPAN nome do controle e agora os dados retornados do servidor será automaticamente atualizada no controle DIV SPAN / quando a operação for concluída.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = http://www.hiteshagrawal.com/uploads/ajax_time.php ";
	 new Ajax. Updater ( "textobj" , url , { ajaxObjhttp var Ajax = novo. Updater ("textobj", url, (
		 operation : "readRecord" } parâmetros: (operação: "readRecord")
         )); 

Aqui fazemos um objeto de Ajax.Updater. Esta objetos aceita três parâmetros o primeiro parâmetro é o nome da DIV / SPAN onde os dados serão atualizados, segundo parâmetro contém o URL da solicitação e terceiro parâmetro contém um objeto que tem a informação essencial que irá enviar / receber do servidor página.

Exemplo:
Neste exemplo eu estou cobrindo todos os 3 aplicação chamada Ajax.

Código HTML:

  <html>
	 <head>
		 <title> Prototype Ajax Call </ title>
		 <script type="text/javascript" src="js/prototype.js"> </ script>
		 <script type="text/javascript">
			 ajaxRequest função () (
				 var url = "/ uploads / ajax_time.php";
				 ajaxObjhttp var = Ajax.Request novo (url, (
					 método: 'POST',
					 parâmetros: (operação: "readRecord")
			                 OnCreate: função de transporte () (
			        	        alert ("Criação de um novo Call Ajax");
			                 )
			                 onSuccess: função de transportes () (
			        		 textBoxObj var = document.getElementById ("ajaxRequestCall");
			                         transport.responseText textBoxObj.innerHTML =;
			                 )
			                 onFailure: function resposta () (
			                        alert ("Ocorreu um erro ao fazer o convite ao servidor remoto");
			                )
			         ));  
			 )

    		         ajaxUpdater função () (
				 var url = "/ uploads / ajax_time.php";
				 textBoxObj ajaxUpdaterCall var = "";
				 ajaxObjhttp var = Ajax.Updater novo (textBoxObj, url, (
					 método: 'POST'
	    		         ));  
			  )

			 ajaxPeriodicUpdater função () (
				 var url = "/ uploads / ajax_time.php";
				 textBoxObj ajaxPeriodicUpdaterCall var = "";
				 ajaxObjhttp var = Ajax.PeriodicalUpdater novo (textBoxObj, url, (
					 método: 'POST',
					 Freqüência: 3
	        		         decadência: 2
	    		         ));   	
			 )
		 </ Script>
	 </ Head>
             <body>
		 Ajax Pedidos: name="ajaxRequestCall" <span id="ajaxRequestCall" style="border: 1px <#CCCCCC"> sólido / span> <input type = "" onclick = botão "ajaxRequest (); "value =" Ajax Pedidos "/> <br /> <br />		
	 Ajax Updater: name="ajaxUpdaterCall" <span id="ajaxUpdaterCall" style="border: 1px <#CCCCCC"> sólido / span> <input type = "" onclick = botão "ajaxUpdater (); "value =" Ajax Updater "/> <br /> <br />	
	 Ajax periódica Updater: name="ajaxPeriodicUpdaterCall" <span id="ajaxPeriodicUpdaterCall" style="border: 1px <#CCCCCC"> sólido / span> <input type = "" onclick = botão "ajaxPeriodicUpdater () ; "value =" Ajax periódica Updater "/> <br />	
	 </ Body>
 </ Html> 

Servidor de código SIDE (PHP):

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

Servidor de código SIDE (JSP):

  "java.util.Date" %> <% @ Page import = "java.util.Date"%>
 <%
	 new Date ( ) ; Data CurrentDate = new Date ();
	 getTime ( ) ; currentTime longo = CurrentDate. getTime ();
	 currentTime ) ; para fora. println (currentTime);
 %> 

De acordo com o ambiente do usuário de trabalho do usuário se o PHP ou Java que eu tenha escrito o código do lado do servidor para o idioma. O utilizador só tem de mudar a url do código javascript.

Custom Search

Artigos populares:

• FORMA HTTP POST em PHP usando AJAX
• Erros comuns de programação AJAX
• FAQ sobre a tecnologia AJAX
• Tutoriais Ajax - O que é AJAX
• Programação Ajax