Zend Framework-Ajax

AJAXは、Webプログラミングの最新技術です。ページを更新することなく、Webページ内のデータを非同期で送受信するオプションを提供します。 Zendフレームワークには、 zend-view および zend-json コンポーネントを介して json モデルを操作するオプションがあります。この章では、Zend AJAXプログラミングについて学びましょう。

JSONコンポーネントをインストールする

Zend jsonコンポーネントは、以下に指定されている Composer コマンドを使用してインストールできます-

composer require zendframework/zend-json

概念

Zendフレームワークには、AJAX対応のWebアプリケーションを簡単に作成するための2つの方法があります。彼らは次のとおりです-

Request オブジェクトの* isXmlHttpRequest（）*メソッド– AJAXリクエストが行われた場合、リクエストオブジェクトのisXmlHttpRequest（）メソッドはtrueを返し、そうでない場合はfalseを返します。このメソッドは、サーバー側でAJAX要求を適切に処理するために使用されます。

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

*Zend/View/Model/JsonModel –* JsonModel *は、AJAXおよびREST APIシナリオ専用に使用される *ViewModel* の代替です。 JsonModelと *JsonStrategy* （モジュールのビューマネージャーブロックで構成されます）は、モデルデータを *Json* にエンコードし、ビュー（phtml）の代わりに応答として返します。

AJAX –作業例

チュートリアルモジュールに新しいajaxページ ajax を追加し、書籍情報を非同期に取得してみましょう。これを行うには、次の手順に従う必要があります。

ステップ1：モジュール構成にJsonStrategyを追加する

チュートリアルモジュール構成ファイル（myapp/module/Tutorial/config/module.config.php）のビューマネージャーブロックを更新します。その後、 JsonStrategy は JsonModel と連携して、jsonデータをエンコードして送信します。

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

ステップ2：TutorialController.phpにajaxActionメソッドを追加する

次のコードでTutorialController.phpにajaxActionメソッドを追加します-

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

ここで、ajaxActionは着信リクエストがAJAXかどうかをチェックします。着信リクエストがAJAXの場合、 JsonModel が作成されます。それ以外の場合、通常の ViewModel が作成されます。

どちらの場合も、本の情報はデータベースから取得され、モデルに入力されます。モデルがJsonModelの場合、 JsonStrategy が呼び出され、データをjsonとしてエンコードし、応答として返します。

*$ query-> get（ 'showJson'）== 1* はデバッグ目的で使用されます。 URLに *showJson = 1* を追加すると、ページにjsonデータが表示されます。

ステップ3：ajax.phtmlを追加する

次に、ajaxActionメソッドのビュースクリプト ajax.phtml を追加します。このページには、ラベルが付いたリンクがあります-ブック情報をロード。

そのリンクをクリックすると、AJAXリクエストが実行され、書籍情報がJsonデータとして取得され、書籍情報がフォーマットされたテーブルとして表示されます。 AJAX処理は JQuery を使用して行われます。

完全なコードリストは次のとおりです-

<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')l('');
            $('#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)l(book['author']);
               $('#title', e)l(book['title']);
               $('#imagepath img', e).attr('src', book['imagepath']);
               $('#book').append(e);
            }
         },
         error : function(xhr, textStatus, errorThrown) {
            alert('Ajax request failed.');
         }
      });
   });
});
</script>

ステップ4：アプリケーションを実行する

最後に、アプリケーション- http：//localhost：8080/tutorial/ajax を実行し、[ブック情報の読み込み]リンクをクリックします。

結果は以下のようになります-

Ajaxページ*-

Ajaxページ

ブック情報付きのAjaxページ

書籍情報

デバッグ情報を含むAjaxページ

デバッグ情報

Zend-framework-ajax

目次