AJAXとは何ですか？

AJAXは、非同期JavaScriptとXMLの略です。XMLはデータ交換フォーマットであり、UXはソフトウェア開発者が使うユーザーエクスペリエンスの略語です。Ajaxは、ユーザーのブラウザに表示されているウェブページがサーバーから特定の情報を要求し、ページ全体を再読み込みすることなく同じページに新しい情報を表示できるインターネット通信技術です。これにより、ユーザーエクスペリエンスがどのように向上するか想像できるでしょう。

XMLは従来のデータ交換フォーマットとして使用されていますが、実際には便利なフォーマットであれば何でも交換できます。PHPコードを使用する際、多くの開発者はJSONを好みます。なぜなら、送信されたデータストリームから作成された内部データ構造がインターフェースを持つのが容易だからです。

AJAXの実際の動作を確認するには、WordPressの管理エリアに移動し、カテゴリまたはタグを追加します。新規追加ボタンをクリックしたときに注意を払い、ページが変更されるが実際には再読み込みされないことに気づいてください。納得できませんか？ブラウザの履歴を確認してください。ページが再読み込みされていれば、ページのエントリが2つ表示されるはずです。

AJAXは、ユーザーのアクションを必要とせずに動作します。Google Docsは、数分ごとにドキュメントを自動的に保存します。AJAXを使用して、保存アクションを開始する必要はありません。

なぜAJAXを使用するのか？

明らかに、ユーザーエクスペリエンスが向上します。退屈で静的なページを表示する代わりに、AJAXを使用すると、動的で応答性のあるユーザーフレンドリーな体験を提供できます。ユーザーは、自分が行ったアクションが正しいか間違っているかについて即座にフィードバックを得ることができます。フィールドの1つに間違いがあることがわかる前に、全体のフォームを送信する必要はありません。重要なフィールドは、データが入力されるとすぐに検証できます。また、ユーザーが入力する際に提案を行うこともできます。

AJAXは、往復するデータの量を劇的に減少させることができます。ページのコンテンツ全体を再読み込みする際に発生するのではなく、関連するデータのみを交換する必要があります。

WordPressプラグインに特に関連して、AJAXはWordPressコンテンツに依存しないプロセスを開始するための最良の方法です。以前にPHPをプログラムしたことがあるなら、新しいPHPページにリンクすることでこれを行うでしょう。リンクをたどるユーザーがプロセスを開始します。この問題は、新しい外部PHPページにリンクすると、WordPressの関数にアクセスできないことです。過去には、開発者は新しいPHPページにコアファイルwp-load.phpを含めることでWordPressの関数にアクセスしていました。しかし、これを行うと、このファイルへの正しいパスを知ることはできません。WordPressのアーキテクチャは、/wp-content/とプラグインファイルが通常の場所からインストールルートの1つ上のレベルに移動できるほど柔軟になりました。wp-load.phpがプラグインファイルに対してどこにあるかを知ることはできず、インストールフォルダへの絶対パスも知ることはできません。

AJAXリクエストを送信する場所は知ることができます。なぜなら、それはグローバルJavaScript変数で定義されているからです。PHP AJAXハンドラスクリプトは実際にはアクションフックであり、すべてのWordPress関数が自動的に利用可能です。外部PHPファイルとは異なります。

AJAXをどのように使用しますか？

WordPressが初めてで、他の環境でAJAXを使用した経験がある場合は、いくつかのことを再学習する必要があります。WordPressがAJAXを実装する方法は、あなたが慣れているものとは異なる可能性が高いです。すべてが新しい場合でも問題ありません。ここで基本を学ぶことができます。基本的なAJAX交換を開発したら、その基盤を拡張して素晴らしいユーザーインターフェースを持つアプリを開発するのは簡単です！

WordPressにおけるAJAX交換の主要なコンポーネントは2つあります。クライアント側のJavaScriptまたはjQueryとサーバー側のPHPです。すべてのAJAX交換は、次のイベントのシーケンスに従います。

  • 1. 何らかのページイベントがJavaScriptまたはjQuery関数を開始します。その関数はページからデータを収集し、HTTPリクエストを介してサーバーに送信します。JavaScriptでHTTPリクエストを処理するのは面倒であり、jQueryはWordPressにバンドルされているため、ここからはjQueryコードのみに焦点を当てます。純粋なJavaScriptでのAJAXも可能ですが、jQueryが利用可能な場合はそれを行う価値はありません。
  • 2. サーバーはリクエストを受信し、データを処理します。関連データを組み立てて、HTTPレスポンスの形式でクライアントブラウザに返すことがあります。これは必須ではありませんが、ユーザーに何が起こっているかを知らせることが望ましいため、何らかのレスポンスを送信しないことは非常にまれです。
  • 3. 最初のAJAXリクエストを送信したjQuery関数がサーバーのレスポンスを受け取り、それを処理します。ページの何かを更新したり、ユーザーにメッセージを表示したりすることがあります。

jQueryを使用したAJAX

ここでは、記事のスニペットからの「処理を行う」部分を定義します。$.post()メソッドを使用します。このメソッドは3つのパラメータを取ります：POSTリクエストを送信するURL、送信するデータ、およびサーバーレスポンスを処理するためのコールバック関数です。ただし、その前に、コールバック関数で使用するための事前計画を行います。目的は、コールバックセクションでより明確になります。

  1. var this2 = this;

URL

すべてのWordPress AJAXリクエストはwp-admin/admin-ajax.phpに送信する必要があります。正しい完全なURLはPHPから取得する必要があります。jQueryはこの値を自動的に決定できず、jQueryコードにURLをハードコーディングして、他の誰かが自分のサイトでプラグインを使用することを期待することはできません。ページが管理エリアからのものであれば、WordPressはグローバルJavaScript変数ajaxurlに正しいURLを設定します。公開エリアからのページの場合は、正しいURLを自分で確立し、wp_localize_script()を使用してjQueryに渡す必要があります。これはPHPセクションで詳細に説明されます。今のところ、フロントエンドとバックエンドの両方で機能するURLは、PHPセグメントで定義するグローバルオブジェクトのプロパティとして利用可能であることを知っておいてください。jQueryでは、次のように参照されます：

  1. my_ajax_obj.ajax_url

データ

サーバーに送信する必要があるすべてのデータはデータ配列に含まれています。アプリに必要なデータに加えて、アクションパラメータを送信する必要があります。データベースに変更をもたらす可能性のあるリクエストには、サーバーがリクエストが正当なソースから来たことを知るためにnonceを送信する必要があります。.post()メソッドに提供される例のデータ配列は次のようになります：

  1. {
  2.   _ajax_nonce: my_ajax_obj.nonce, // nonce
  3.   action: "my_tag_count", // action
  4.   title: this.value // data
  5. }

各コンポーネントは以下に説明されています。

Nonce

Nonceは「一度だけ使用される番号」のポートマンテauです。これは、提供される任意のフォームの各インスタンスに割り当てられた一意のシリアル番号です。nonceはPHPスクリプトで確立され、URLと同じ方法でjQueryに渡されます。グローバルオブジェクトのプロパティとして参照されます。この場合、my_ajax_obj.nonceとして参照されます。

注意

真のnonceは、使用されるたびに更新される必要があります。次のAJAX呼び出しには、新しい未使用のnonceが送信されます。実際、WordPressのnonce実装は真のnonceではありません。同じnonceは、ログアウトしない限り、24時間の期間中に必要な回数だけ使用できます。同じシードフレーズでnonceを生成すると、12時間の期間中は常に同じ番号が生成され、その後新しい番号が生成されます。

アプリに真のセキュリティが必要な場合は、サーバーがAJAXリクエストに応じて新しい新鮮なnonceを送信し、次のリクエストを検証するために使用するように実装してください。

このnonce値を_ajax_nonceにキー付けするのが最も簡単です。nonceを検証するPHPコードと調整されている場合は異なるキーを使用できますが、デフォルト値を使用して調整を心配しない方が簡単です。このキーと値のペアの宣言は次のようになります：

  1. _ajax_nonce: my_ajax_obj.nonce

アクション

すべてのWordPress AJAXリクエストには、データにアクション引数を含める必要があります。この値は、AJAXハンドラーコードをフックするために使用されるアクションタグを構築するための一部として使用される任意の文字列です。この値は、AJAX呼び出しの目的を非常に簡潔に説明するのが便利です。驚くことではありませんが、この値のキーは‘action’です。この例では、“my_tag_count”をアクション値として使用します。このキーと値のペアの宣言は次のようになります：

  1. action: "my_tag_count"

サーバーがタスクを実行するために必要な他のデータもこの配列に含まれています。送信するフィールドが多い場合、データフィールドを単一の文字列に結合するための2つの一般的なフォーマット、XMLとJSONがあります。これらのフォーマットを使用することは任意ですが、何をするにしてもサーバー側のPHPスクリプトと調整する必要があります。これらのフォーマットに関する詳細情報は、次のコールバックセクションで入手できます。このフォーマットでデータを受信することは、送信するよりも一般的ですが、双方向で機能することもできます。

この例では、サーバーは選択された書籍のタイトルの単一の文字列という1つの値のみを必要とするため、キー‘title’を使用します。jQueryでは、イベントを発生させたオブジェクトは常に変数thisに含まれています。したがって、選択された要素の値はthis.valueです。このキーと値のペアの宣言は次のようになります：

  1. title: this.value

コールバック

コールバックハンドラーは、リクエストが行われた後にサーバーからレスポンスが返ってきたときに実行される関数です。ここでも、通常は匿名関数が見られます。この関数には1つのパラメータ、サーバーレスポンスが渡されます。レスポンスは、はいまたはいいえから巨大なXMLデータベースまで何でもあり得ます。JSON形式のデータもデータにとって便利な形式です。レスポンスは必ずしも必要ではありません。レスポンスがない場合、コールバックを指定する必要はありません。UXの観点から、リクエストに対して何が起こったかをユーザーに知らせることは常に良いアイデアですので、常に応答し、何かが起こったことを示すことをお勧めします。

この例では、ラジオ入力の後の現在のテキストをサーバーレスポンスで置き換えます。これは、書籍タイトルによってタグ付けされた投稿の数を含みます。ここに私たちの匿名コールバック関数があります：

  1. function( data ) {
  2.   this2.nextSibling.remove();
  3.   $( this2 ).after( data );
  4. }

dataには、サーバーからの全レスポンスが含まれています。以前に、this2に変更イベントをトリガーしたオブジェクト（thisとして参照される）を割り当てました。これは、クロージャ内の変数スコープが1レベルしか拡張されないためです。イベントハンドラー（最初は“/ do stuff /”を含んでいた部分）でthis2を割り当てることで、コールバック内でthisがスコープ外になる場合でも使用できるようになります。

サーバーレスポンスは、あらゆる形式を取ることができます。大量のデータは、より簡単に処理できるようにデータストリームにエンコードする必要があります。XMLとJSONは、一般的なエンコーディングスキームの2つです。

XML

XMLはAJAXの古いデータ交換フォーマットです。結局のところ、AJAXの「X」です。ネイティブPHP関数を使用して作業するのが難しい場合もありますが、依然として有効な交換フォーマットです。そのため、多くのPHPプログラマーはJSON交換フォーマットを好みます。XMLを使用する場合、解析方法は使用されるブラウザによって異なります。Internet ExplorerにはMicrosoft.XMLDOM ActiveXを使用し、それ以外のすべてにはDOMParserを使用します。なお、Internet ExplorerはWordPressによってもはやサポートされていません 5.8リリース以降。

JSON

JSONは、その軽量性と使いやすさから好まれることが多いです。実際、eval()を使用してJSONを解析できますが、それは避けてください！eval()の使用は重大なセキュリティリスクを伴います。代わりに、専用のパーサーを使用してください。これは、より高速でもあります。グローバルインスタンスのパーサーオブジェクトJSONを使用します。それが利用可能であることを確認するために、ページ上の他のスクリプトと一緒にエンキューされていることを確認してください。エンキューに関する詳細情報は、後のPHPセクションに含まれています。

その他

データフォーマットがPHPハンドラーと調整されている限り、カンマ区切り、タブ区切り、またはあなたに合った任意の構造など、好きなフォーマットを使用できます。

クライアントサイドの要約

コールバックを$.post()関数の最終パラメータとして追加したので、サンプルjQuery Ajaxスクリプトが完成しました。すべての要素を組み合わせると、次のようになります：

  1. jQuery(document).ready(function($) {         //wrapper
  2.     $(".pref").change(function() {          //event
  3.         var this2 = this;                  //use in callback
  4.         $.post(my_ajax_obj.ajax_url, {      //POST request
  5.             _ajax_nonce: my_ajax_obj.nonce, //nonce
  6.             action: "my_tag_count",         //action
  7.             title: this.value               //data
  8.             }, function(data) {            //callback
  9.             this2.nextSibling.remove(); //remove current title
  10.             $(this2).after(data);       //insert server response
  11.             }
  12.         );
  13.     } );
  14. } );

このスクリプトは、ウェブページのblockに出力するか、独自のファイルに含めることができます。このファイルはインターネット上のどこにでも存在できますが、ほとんどのプラグイン開発者は、プラグインのメインフォルダの/js/サブフォルダに配置します。特に理由がない限り、慣例に従うのが良いでしょう。この例では、ファイル名をmyjquery.jsとします。