Zend Framework - Ajax

AJAX es una tecnología moderna en programación web. Proporciona opciones para enviar y recibir datos en una página web de forma asincrónica, sin actualizar la página. Zend framework ofrece una opción para trabajar conjson modelo a través zend-view y zend-jsoncomponente. Aprendamos la programación Zend AJAX en este capítulo.

Instalar el componente json

El componente Zend json se puede instalar utilizando el Composer comando como se especifica a continuación -

composer require zendframework/zend-json

Concepto

Zend framework proporciona dos métodos para escribir fácilmente una aplicación web habilitada para AJAX. Son los siguientes:

los isXmlHttpRequest() método en el Requestobjeto: si se realiza una solicitud AJAX, el método isXmlHttpRequest () del objeto de solicitud devuelve verdadero; de lo contrario, falso. Este método se usa para manejar una solicitud AJAX correctamente en el lado del servidor.

if ($request->isXmlHttpRequest()) { 
   // Ajax request 
} else { 
   // Normal request 
}

Zend / View / Model / JsonModel - El JsonModel es una alternativa para ViewModelpara ser utilizado exclusivamente para AJAX y los escenarios de API REST. El JsonModel junto conJsonStrategy (que se configurará en el bloque del administrador de vistas del módulo) codifica los datos del modelo en Json y lo devuelve como respuesta en lugar de vistas (phtml).

AJAX - Ejemplo de trabajo

Agreguemos una nueva página ajax, ajaxen el módulo de tutorial y obtener la información del libro de forma asincrónica. Para hacer esto, debemos seguir los siguientes pasos.

Paso 1: agregue JsonStrategy en la configuración del módulo

Actualice el bloque del administrador de vistas en el archivo de configuración del módulo del tutorial: myapp / module / Tutorial / config / module.config.php. Luego,JsonStrategy trabajará con JsonModel para codificar y enviar los datos json.

'view_manager' => [ 
   'template_map' => array
      ('layout/layout' => __DIR__ . '/../view/layout/newlayout.phtml'), 
   'template_path_stack' => [ 
      'tutorial' => __DIR__ . '/../view', 
   ], 
   'strategies' => array('ViewJsonStrategy',), 
],

Paso 2: agregue el método ajaxAction en TutorialController.php

Agregue el método ajaxAction en TutorialController.php con el siguiente código:

public function ajaxAction() { 
   $data = $this->bookTable->fetchAll(); 
   $request = $this->getRequest(); 
   $query = $request->getQuery();  
   if ($request->isXmlHttpRequest() || $query->get('showJson') == 1) { 
      $jsonData = array(); 
      $idx = 0; 
      foreach($data as $sampledata) { 
         $temp = array( 
            'author' => $sampledata->author, 
            'title' => $sampledata->title, 
            'imagepath' => $sampledata->imagepath 
         );  
         $jsonData[$idx++] = $temp; 
      } 
      $view = new JsonModel($jsonData); 
      $view->setTerminal(true); 
   } else { 
      $view = new ViewModel(); 
   }  
   return $view; 
}

Aquí, ajaxAction comprobará si la solicitud entrante es AJAX o no. Si la solicitud entrante es AJAX, entonces elJsonModelse creará. De lo contrario, unViewModel se creará.

En ambos casos, la información del libro se obtendrá de la base de datos y se completará en el modelo. Si el modelo es un JsonModel, entoncesJsonStrategy se invocará y codificará los datos como json y los devolverá como respuesta.

los $query->get('showJson') == 1se utiliza con fines de depuración. Solo agregashowJson=1 en la url y la página mostrará los datos json.

Paso 3: agregue ajax.phtml

Ahora, agregue el script de vista ajax.phtmlpara el método ajaxAction. Esta página tendrá un enlace con la etiqueta -Load book information.

Al hacer clic en ese enlace, se realizará una solicitud AJAX, que obtendrá la información del libro como datos Json y mostrará la información del libro como una tabla formateada. El procesamiento AJAX se realiza utilizando elJQuery.

La lista completa de códigos es la siguiente:

<a id = "loadbook" href = "#">Load book information</a> 
</br> </br> 

<table class = "table"> 
   <tbody id = "book"> 
   </tbody> 
</table>  

<script language = "javascript"> 
$(document).ready(function(){  
   $("#loadbook").on("click", function(event){ 
      $.ajax({ 
         url:        '/tutorial/ajax', 
         type:       'POST',  
         dataType:   'json', 
         async:      true, 
         
         success: function(data, status) { 
            var e = $('<tr><th>Author</th><th>Title</th><th>Picture</th></tr>'); 
            $('#book').html(''); 
            $('#book').append(e); 
            
            for(i = 0; i < data.length; i++) { 
               book = data[i]; 
               var e = $('<tr><td id = "author"></td><td id = "title"></td>
               <td id="imagepath"><img src = ""/></td></tr>'); 
               $('#author', e).html(book['author']); 
               $('#title', e).html(book['title']); 
               $('#imagepath img', e).attr('src', book['imagepath']); 
               $('#book').append(e); 
            } 
         }, 
         error : function(xhr, textStatus, errorThrown) { 
            alert('Ajax request failed.'); 
         } 
      }); 
   }); 
}); 
</script>

Paso 4: ejecuta la aplicación

Finalmente, ejecute la aplicación - http://localhost:8080/tutorial/ajax y haga clic en el enlace Cargar información del libro.

El resultado será el que se muestra a continuación:

Ajax Page -

Ajax Page with Book Information

Ajax page with debugging information

↰ Previous page Next page ↱