アプリケーション間通信＠アプリケーション連携¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. アプリケーション間通信の種類¶
処理タイミングで見た種類¶
▼ 同期通信¶
記入中...
▼ 非同期通信とは¶
非同期処理の一種である。
そのため、通信の完了を待たずに後続の処理が開始する。
後続の全処理が非同期通信と無関係であれば、そのままで問題は起こらない。
しかし、後続の処理に非同期通信の結果を使用するものが含まれている場合、この処理だけは非同期通信の後に実行されるように定義する必要がある。
- JavaScriptのAjax
- メッセージキュー
通信方向で見た種類¶
▼ 一方向¶
クライアントからサーバーにリクエストを送信する。
サーバーからクライアントにリクエストを送信することはない。
▼ 双方向¶
クライアントとサーバー間が双方向でリクエストを送信し合う。
- gRPCの双方向ストリーミングRPC
- Websocket
02. Ajaxによる非同期通信¶
Ajaxとは：Asynchronous JavaScript + XML¶
JavaScriptで非同期通信を実装する手法のこと。
JavaScript、HTML、XHTML、CSS、DOM、XML、XSLT、を組み合わせる。
Ajaxの仕組み¶
(1)-
urlに接続することにより、サーバーからデータがレスポンスされる。
(2)-
DOMのマークアップ言語の解析により、Webページが構成される。
(3)-
ページ上で任意のイベント (例：ページング操作、フォーム入力など) が発火し、紐付くハンドラ関数が実行される。
(4)-
JavaScript型オブジェクトがJSONに変換される。
(5)-
非同期通信により、バックエンドにリクエストを送信する。
(6)-
コントローラーは、JSON型データを受信し、加えてそれを元にDBからオブジェクトをReadする。
(7)-
コントローラーは、PHP型オブジェクトをJSONに変換し、レスポンスを返信する。
(8)-
非同期通信メソッドがバックエンドからレスポンスを受信する。
(9)-
JSONがJavaScript型オブジェクトに変換される。
(10)-
オブジェクトがマークアップ言語に出力される。
(11)-
DOMを使用して、Webページを再び構成する。
実装方法の種類¶
歴史的に、Ajaxを実装するための方法がいくつかある。
▼ xhrオブジェクト¶
JavaScriptのビルトインオブジェクトである。
今では使用することは少ないが、Ajaxが登場した初期の頃によく使われた。
▼ fetchメソッド¶
JavaScriptのビルトイン関数である。
▼ JQueryオブジェクト¶
JQueryパッケージである。
▼ axiosオブジェクト¶
Axiosパッケージである。
02-02. Ajaxの実装¶
xhrオブジェクトの場合¶
▼ GET送信¶
＊実装例＊
// URL
const url = "https://example.com/";
const xhr = new XMLHttpRequest();
// HTTPメソッドを指定
xhr.open("GET", url);
// レスポンス受信後の処理
xhr.onload = () => {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
// 最後に送信を実行
xhr.send();
▼ POST送信¶
＊実装例＊
// URL
const url = "https://example.com/";
// メッセージボディ
const body = {
name: "Hiroki",
email: "example@gmail.com",
password: "password",
};
const queries = [];
for (const key in body) {
const query = key + "=" + encodeURIComponent(params[key]);
queries.push(query);
}
const queryString = queries.join("&");
const xhr = new XMLHttpRequest();
// HTTPメソッドを指定
xhr.open("POST", url);
// 送信するデータ型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// レスポンス受信後の処理
xhr.onload = () => {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
}
};
// 最後に送信を実行
xhr.send(queryString);
JQueryオブジェクトの場合¶
▼ GET送信¶
＊実装例＊
const url = "https://example.com/";
$.get(url);
▼ POST送信¶
＊実装例＊
const url = "https://example.com/";
const body = {
name: "Hiroki",
email: "example@gmail.com",
password: "password",
};
$.post(url, params);
▼ 任意のHTTPメソッド¶
任意のHTTPメソッド、URL、ヘッダー、メッセージボディなどを設定し、非同期的にパケットを送受信する。
Promiseオブジェクトを返却する。
＊実装例＊
const id = 1;
$.ajax({
// ###################
// リクエスト
// ###################
// HTTPメソッド
type: "POST",
// URL
url: "/xxx/xxx/" + id + "/",
// 送信するデータ型
contentType: "application/json",
// メッセージボディ
data: {
name: "Hiroki",
email: "example@gmail.com",
password: "password",
},
// ###################
// レスポンス
// ###################
// 受信するデータ型
dataType: "json",
});
Axiosオブジェクトの場合¶
▼ GET送信¶
＊実装例＊
const url = "https://example.com/";
axios.get(url);
▼ POST送信¶
＊実装例＊
const url = "https://example.com/";
const body = {
name: "Hiroki",
email: "example@gmail.com",
password: "password",
};
axios.post(url, params);