Zend Framework - Ajax

AJAX é uma tecnologia moderna em programação web. Ele fornece opções para enviar e receber dados em uma página da Web de forma assíncrona, sem atualizar a página. Zend framework oferece uma opção para trabalhar com ojson modelo através zend-view e zend-jsoncomponente. Vamos aprender a programação Zend AJAX neste capítulo.

Instale o componente json

O componente Zend json pode ser instalado usando o Composer comando conforme especificado abaixo -

composer require zendframework/zend-json

Conceito

A estrutura Zend fornece dois métodos para escrever facilmente um aplicativo da Web habilitado para AJAX. Eles são os seguintes -

o isXmlHttpRequest() método no Requestobject - Se uma solicitação AJAX for feita, o método isXmlHttpRequest () do objeto de solicitação retornará verdadeiro, caso contrário, será falso. Este método é usado para tratar uma solicitação AJAX corretamente no lado do servidor.

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

O Zend / View / Model / JsonModel - O JsonModel é uma alternativa para ViewModelpara ser usado exclusivamente para cenários AJAX e REST API. O JsonModel junto comJsonStrategy (a ser configurado no bloco do gerenciador de visualização do módulo) codifica os dados do modelo em Json e retorna como uma resposta em vez de visualizações (phtml).

AJAX - Exemplo de Trabalho

Vamos adicionar uma nova página ajax, ajaxno módulo tutorial e busque as informações do livro de forma assíncrona. Para fazer isso, devemos seguir as etapas a seguir.

Etapa 1: Adicionar JsonStrategy na configuração do módulo

Atualize o bloco do gerenciador de visualização no arquivo de configuração do módulo do tutorial - myapp / module / Tutorial / config / module.config.php. Então,JsonStrategy vai trabalhar com JsonModel para codificar e enviar os dados json.

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

Etapa 2: adicione o método ajaxAction no TutorialController.php

Adicione o método ajaxAction no TutorialController.php com o seguinte 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; 
}

Aqui, ajaxAction verificará se a solicitação de entrada é AJAX ou não. Se a solicitação de entrada for AJAX, oJsonModelSerá criado. Caso contrário, um normalViewModel Será criado.

Em ambos os casos, as informações do livro serão obtidas do banco de dados e preenchidas no modelo. Se o modelo for um JsonModel, entãoJsonStrategy será chamado e codificará os dados como json e retornará como resposta.

o $query->get('showJson') == 1é usado para fins de depuração. Basta adicionarshowJson=1 no url e a página exibirá os dados json.

Etapa 3: adicione ajax.phtml

Agora, adicione o script de visualização ajax.phtmlpara o método ajaxAction. Esta página terá um link com o rótulo -Load book information.

Clicar nesse link fará uma solicitação AJAX, que buscará as informações do livro como dados Json e mostrará as informações do livro como uma tabela formatada. O processamento AJAX é feito usando oJQuery.

A lista de códigos completa é a seguinte -

<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>

Etapa 4: execute o aplicativo

Finalmente, execute o aplicativo - http://localhost:8080/tutorial/ajax e clique no link Carregar informações do livro.

O resultado será como mostrado abaixo -

Ajax Page -

Ajax Page with Book Information

Ajax page with debugging information

↰ Previous page Next page ↱