AJAXとは何ですか？

WordPressでAJAXを使用することは、動的でインタラクティブなウェブコンテンツを作成するためにウェブ開発者がよく使用する一般的な組み合わせです。AJAXを使用すると、ページ全体を更新することなく、ウェブページの特定の部分を更新することができます。ウェブサイトの訪問者はフロントエンドでそれを意識することはありません。

基本的に、AJAXは以下のような多くの技術を組み合わせています。 JavaScript、XML 歌で応える XMLHttpRequest オブジェクト.これらの技術は、ウェブブラウザとサーバーの間で非同期にデータを送受信するために連携して動作します。

この記事では、AJAXの仕組みやWordPressでAJAXが役立つ理由など、AJAXについて詳しく説明します。また、WordPressウェブサイトにAJAXを実装して機能を強化する方法をステップバイステップで説明します。

AJAXの概要

AJAXとは、Asynchronous JavaScript and XMLの略で、サーバーへの非同期リクエストと、ページをリロードすることなくページの変更を可能にする技術です。AJAXスクリプトは、サーバーに何らかのデータを返すようリクエストし、得られたデータを使用してページを変更します。

例えば、予約日を選択するドロップダウンメニューと、予約可能な時間を動的に表示する別のドロップダウンリストがあるとします。AJAXスクリプトを通して、ドロップダウン項目のリストを更新するために、サーバーはオプションの予約可能な時間を提供するように要求されます。

AJAXとREST API

AJAXとREST APIは、ユーザーエクスペリエンスを向上させるためにウェブ開発で使用されるため、よく比較されます。主な違いを見てみましょう！

AJAXはどのように機能するのですか？

AJAXは、ウェブブラウザとサーバー間の非同期データ交換を可能にするウェブ開発技術のグループです。ページ全体をリロードすることなく、ウェブページを動的に更新することができます。

技術的な観点からは、AJAXはJavaScript、XML（現在ではJSONなどの他の形式も広く使われています）、XMLHttpRequestオブジェクトを組み合わせて実装されます。典型的なワークフローを示します：

1. イベントトリガユーザーがボタンをクリックしたり、フォームを送信したりといったイベントをトリガーし、AJAXリクエストが開始されます。

2. XMLHttpRequest オブジェクトJavaScriptは、ブラウザとサーバーの仲介役となるXMLHttpRequestオブジェクトのインスタンスを生成します。

3. 非同期リクエストXMLHttpRequest オブジェクト (ステップ 2) は、ユーザーと Web ページとのやり取りを妨げたり、邪魔したりすることなく、非同期リクエストをサーバーに送信します。

4. サーバー通信リクエストはサーバーに送られ、サーバーはリクエストを処理してレスポンスを生成します。

5. データ収集サーバーは処理を完了し、レスポンスデータをブラウザに返します。

6. 動的更新ブラウザはJavaScriptを使ってDOM（Document Object Model）を操作し、ページ全体をリロードすることなく、受け取ったレスポンスに基づいてウェブページのコンテンツを更新します。

AJAXリクエストフローチャート

AJAXを使用することで、ウェブ開発者は、よりインタラクティブでレスポンシブなウェブアプリケーションを作成することができます。AJAXは、リアルタイム更新、動的なコンテンツの読み込み、フォーム検証などを可能にし、ユーザーエクスペリエンスを大幅に向上させます。

ページを完全にリロードする必要性を減らすことで、ブラウザとサーバー間のデータ交換をよりスムーズ、高速、効率的にし、よりスムーズなウェブインタラクションを可能にします。

AJAXはなぜ便利なのでしょうか？

AJAXは様々な場面で役に立ちます。編集によく使われるものを見てみましょう。WordPressで下書きを自動保存機能

WordPressの下書きをAJAXで自動保存
AJAXはWordPressの下書きの自動保存を可能にします。これにより、データの損失を防ぎ、WordPressユーザーにシームレスな執筆体験を提供します。

代表例ブログ記事を書いたり、ページを作成する際、AJAXは定期的にコンテンツをサーバーに送信し、バックグラウンドで下書きとして保存することができます。

AJAXで下書きを自動保存

WordPressの開発にAJAX技術を活用することで、ユーザーはよりダイナミックでインタラクティブ、かつレスポンシブなウェブページを作成することができます。

WordPressでAJAXを使う

WordPress自体がネイティブにAJAXをサポートしており wp-adminフォルダ参照 "admin-ajax.php "ファイルこれはもともと、WordPress のバックエンドから AJAX リクエストを開始するすべての関数のために作成されました。これはもともと、WordPress のバックエンドから AJAX リクエストを開始するすべての関数のために作成されました。

WordPressのAJAXリクエストはすべてPHPスクリプトで処理する必要があります。つまりadmin-ajax.php コンテンツを返す操作が呼び出されるPHPファイルでなければなりません。

2013年、WordPressはWordPress Heartbeat APIを発表しました。オートセーブ機能、ログイン有効期限リマインダー、のみならず他のユーザーがWordPressの記事を執筆または編集しています。そうすると、記事ロックの警告が出ます。

記事ロック

他のユーザーが編集中の投稿を編集しようとすると、現在の状況を知らせる警告がポップアップ表示されます。その際、3つのオプションが表示されます：すべての記事そしてプレビュー平和 買収記事.

買収記事

上記の機能は、サーバーとブラウザを接続し、適切な通信と応答を保証するWordPress Heartbeat APIのおかげで実現しています。

WordPress Heartbeat APIは、サーバーと通信するためにリクエストを生成し、データ/レスポンスを受信するとイベントをトリガーします。これは通常、サーバーの負荷を増加させ、最終的にWordPressバックエンドの速度を低下させる可能性があります。

代表例

ワードプレスのバックエンドにログインし、記事を書き始めました。その後、他のコンテンツを見るために複数のタブを開きました。にもかかわらず、バックエンドはログインしたままで admin-ajax.php サーバーにリクエストを送り続けます。

上記の問題に基づき、WordPressのadmin-ajax.phpは15秒ごとにリクエストを生成します。このリクエストはサーバとの通信であれば何でもかまいません。

WordPress の AJAX リクエストはを wp-admin フォルダに追加します。admin-ajax.phpファイルハンドリング。これはバックエンドとユーザー向けのAJAX機能のための指定ファイルです。

AJAXリクエストを開始するにはゲットもしかしたらポストメソッドには、リクエストデータの操作パラメータが含まれます。

このアクションパラメーターはadmin-ajax.php ファイルはトリガーの具体的なフック

これらのフックの名前はwp_ajax_my_action歌で応えるwp_ajax_nopriv_my_actionどのmy_actionは次のようになります。GETまたはPOSTリクエストのactionパラメータの値。

WordPressでの使い方を見てみましょう。WordPressを使うのが初めてだったり、技術的な知識がなかったりすると、理解するのが難しいかもしれません。HTML、CSS、PHPの知識だけでなく、JavaScript（jQueryで十分です）をよく理解していることが重要です。

• 使うwp_enqueue_script()関数は、AJAX リクエストを処理する JavaScript ファイルをキューに追加します。例えばテーマのfunctions.phpまたはカスタムプラグインファイルに記述します。
• 用いるwp_localize_script()関数ネイティブAJAXスクリプトこれにより、PHP コードからスクリプトにデータを渡し、JavaScript でアクセスできるようにします。これにより、PHP コードからスクリプトにデータを渡すことができ、 JavaScript でアクセスできるようになります。
• ワードプレスの使用wp_send_json()もしかしたらwp_send_json_success()歌で応えるwp_send_json_error()関数はレスポンスデータをクライアントJavaScriptに送り返します。レスポンスに必要なデータやエラーメッセージを含めることができます。
• を使用することができます。jQuery.ajax()方法または略称jQuery.post()もしかしたらjQuery.get()メソッドはAJAXリクエストをサーバーに送信します。

これらの例では、WordPressのさまざまなシナリオでAJAXを使用することで、ユーザーとのインタラクションを強化し、パフォーマンスを向上させ、シームレスなユーザー体験を提供する方法を示しています。

admin-ajax.phpリクエストの分析

プラグインのリクエストはWordPressの admin-ajax.php ファイルには多くの問題があります。これらのプラグインは、ポップアップやソーシャルシェア数の更新などの特定の機能を要求することで、WordPressバックエンドの速度を低下させる可能性があります。しかし、すべてのリクエストが admin-ajax.php 文書過多。

リクエストが適切に処理され、プラグイン開発者がAJAXコールを使うためのベストプラクティスに従っていればadmin-ajax.php ファイルは問題なく動作するはずです。

次に、ウェブサイトが遅くなる原因となるチェックについて見てみましょう。 admin-ajax.php 最高のリクエスト方法です。

1.デバッグモードの有効化

ウェブサイトの wp-config.php WordPressのデバッグモードを有効にするために、以下のコードをファイルに追加してください：

phpコピーコードdefine('WP_DEBUG', true)；

2.ネットワークリクエストの監視

ブラウザでサイトを開き、[検査] > [ネットワーク]に進みます。を押します。 Ctrl + R そして admin-ajax.php ファイルネットワーク要求リストで admin-ajax.php をクリックして詳細をご覧ください。

リクエストメソッド (GET または POST)、リクエストパラメータ、レスポンスタイムに注意してください。異なるリクエストのレスポンスタイムを比較し、重要な違いがあれば特定します。

3.プラグインの無効化

プラグインを一つずつ無効にしていきます。 admin-ajax.php キャッシュプラグインや最適化プラグインなど、インタラクティブなプラグインから始めましょう。

各プラグインを無効にした後、ページをリロードし、ネットワークリクエストを監視します。レスポンスタイムやリクエストサイズの変化を記録してください。

4.問題のあるプラグインの特定

レスポンスタイムの大幅な改善、または admin-ajax.php リクエストのサイズが小さくなると、問題の原因となっているプラグインやリクエストを見つけることができます。

WordPressバックエンドの高速化

WordPressのバックエンドを高速化するには、Heartbeat APIを無効にするか、少なくとも時間間隔を長く設定して、数秒ごとにサーバにリクエストを送信しないようにするのがベストプラクティスです。

そのため、Breezeプラグインをインストールする必要があります。

ウェブサイトのWordPressバックエンドにログインします。に移動します。プラグイン" → 「新しいプラグインの追加" → 検索 「ブリーズ" → プラグインのインストールと有効化.

に移動します。 セットアップ → ブリーズ → ハートビートAPI.ここで、Heartbeat APIを設定するための4つの異なるオプションが表示されます。

1. コントロール・ハートビートバックエンド、投稿エディタ、フロントエンドでHeartbeat APIのオン/オフを切り替えることができます。
2. フロントエンド・ハートビートこのオプションはフロントエンドの動作を変更したり、完全に無効にしたりすることができます。
3. 記事編集者 Heartbeatこのオプションでは、WordPressの投稿エディタの動作を変更したり、完全に無効にしたりすることができます。
4. バックステージ・ハートビートこのオプションは背景の動作を変更したり、完全に無効にすることができます。

ここでは、複数のルールを作成する必要があります：

デフォルトでは、WordPress Heartbeat APIはデフォルトの頻度を使用しますが、必要に応じて複数のルールを作成できます。

例えば、WordPressのバックエンド（ダッシュボード）は2分（120秒）ごとにトリガーし、投稿エディタは3分（180秒）ごとにトリガーするようにします。

したがって、2つのルールを作成する必要があります。1つはWordPressバックエンド用、もう1つは投稿エディタ用です。それぞれトリガーの頻度を2分と3分に設定します。

AJAXのセキュリティに関する考察

AJAXを扱う場合、特別な注意を必要とするセキュリティの側面がいくつかあります。ここでは、いくつかの重要なセキュリティ上の考慮事項を示します：

1. AJAXアプリケーションは、クロスサイト・スクリプティング攻撃（XSS）に対して脆弱です。つまり、適切な検証やコーディングが行われないと、AJAXコードは簡単に操作されてしまいます。その結果、攻撃者は簡単に情報を盗んだり、コンテンツを改ざんしたり、悪意のあるアクションを実行したりすることができます。
2. AJAX関数の呼び出しは、平文でサーバーに送信されます。適切なプロトコルがなければ、誰でも機密情報を引き出すことができます。これは本質的に、データベースを悪意のある攻撃者のコントロール下に置くことになります。
3. AJAXは一部のインターネットブラウザと互換性がない場合があります。ブラウザによってAJAXリクエストの扱いが異なる場合があり、互換性の問題につながります。

概要

さて、AJAXとは何か、非同期で画面を更新したりリフレッシュしたりすることで、Webアプリケーションのユーザー体験をどのように向上させることができるかを学びました。また、フロントエンドとバックエンドの両方でWordPressでAJAXを使用する方法についても見てきました。

WordPress AJAXを使えば、ページをリロードすることなくサーバーとやりとりする、よりダイナミックでレスポンシブなサイトを作成することができます。この記事がお役に立ち、有益な情報を提供できたことを願っています。