イントロダクション

今回は、非同期通信の実装とテストを行います。注意点としては、クライアントサイドのみの実装ですので7、サーバーサイド(PHP)まで処理が届くことを考慮に入れていません。ワードプレスのプラグインで非同期通信を行うのには、アクションフックを設定する必要があるようです。

XMLHttpRequest

前回は、XMLHttpRequestについて調べました。ちょっとしたコードも作成しました。

では、早速やりましょう！

非同期通信の実装

作成する非同期通信で使用するXMLHttpRequestは汎用的に使用したいのですが、今回は汎用化しないでプラグインのphpファイルで出力します。

具体的に。。。
下のようなダッシュボードの表示を行うためのHTMLを出力しているPHPファイルはmanage.phpと言うファイルです。gitにアップロードしてあるのでよかったら見てください。
そして、このファイルに下のようなコードを追加します。

/*
 * XMLHttpRequest生成のメソッド
 * @param methdoName GET or POST
 * @param sendURL リクエストの送信先のURL
 * @param btnId 謳歌したときに起動するボタンのID
 * @param stateChangeMethod レスポンス
 */
function createXHR(sendURL, btnId, stateChangeMethod, clickMethod) {
    xhr = new XMLHttpRequest();
    document.getElementById(btnId).addEventListener('click', clickMethod);
    xhr.onreadystatechange = stateChangeMethod;
    return xhr;
}

このメソッドはXMLHttpRequestを作成して返却します。

前回も記載しましたので細かいところは割愛しますが、作成したXMLHttpRequest(XHR)は下のようなメソッドを設定してやる必要があります。

ステータス変更時の処理(メソッド)
送信先のURL

これらを引数で渡すようにしてあります。
function createXHR(methdName, sendURL, btnId, stateChangeMethod, clickMethod)

そして、プラグインのZIPファイルをインストールしたときに誰でも使用できるようにBootStrapのURLを指定しておきます。echo '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">;';
さらに下のリンクはBootStrapのチュートリアルへのリンクです。

BootStrapのチュートリアル。

受診する側のPHPを作成する

今回の非同期通信は作成したアンケート情報をDBに登録する処理を行うために使用します。
なので、InsertQuestionary.phpと言うファイルを作成します。

JS側からの送信

リクエストにはGETとPOSTの２種類あります。
GETはデータの取得、公開して良い情報をパラメータとして渡す、などの使用方法があります。
今回は、公開したくない情報をリクエストするのでPOSTを使用します。
参考にしたサイトはこちらです。

送信時に詰まったこと

とりあえず詰まったのは送信するのにJSONで送信したことです。
送信時に以下のように実装する必要がありました。

    // JSONで送信する
    xhr.open("POST", '');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));

そして、WebAPI側のPHPではJSONで取得するのでリクエストの取得とちょいと違う方法で取得する必要がありました。

ini_set('display_errors', "On");
// JSONリクエストを受け取る
$json = file_get_contents('php://input');
$data = json_decode($json);
$question = $data->question;
// (プラグインフォルダにあるので)WordPressはすでに読み込まれている
// データ登録用のグローバル変数
//$wpdb;

echo $question;

だいぶ遅くなってしまったので今日はここで失礼します。

JQueryを使う

WPでの実装では、jQueryがデフォルトで参照できるようです。。。なのでincludeの追記が必要ないと思われます。※自分の環境では必要ありませんでした。

送信処理のカタチ

そして、これを実装すると下のようになります。

$.ajax({
  //サーバに送信するリクエストの設定
)}
.done(function(){
  //通信に成功した場合の処理
})
.fail(function(){
  //通信に失敗した場合の処理
})

サンプルコード

REST通信などと呼ばれている方法では、JSONをリクエストで送信します。

    $.ajax({ 
      url: 'sample.php', // リクエスト送信するファイル
      type: 'POST',// HTMLを取得したいだけならGETでよい
      dataType: 'json' // 最近ではRESTなんて呼ばれている
    }).done(function(html) {
      console.log(html); // 正常レスポンス時の処理
    }).fail(function() {
      alert('エラーが起きました'); // 異常レスポンス時の処理
    });

でわでわ。。。

非同期通信の実装〜WordPressプラグインの作成準備〜

イントロダクション

XMLHttpRequest

非同期通信の実装

BootStrapのチュートリアル。

受診する側のPHPを作成する

JS側からの送信

送信時に詰まったこと

JQueryを使う

送信処理のカタチ

サンプルコード

関連ページ

投稿者:

takunoji

コメントを残すコメントをキャンセル

イントロダクション

XMLHttpRequest

非同期通信の実装

BootStrapのチュートリアル。

受診する側のPHPを作成する

JS側からの送信

送信時に詰まったこと

JQueryを使う

送信処理のカタチ

サンプルコード

関連ページ

投稿者:

takunoji

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル