Skip to content

DNET_JavaScriptHTTPClient

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

JavaScript の HTTP Client

概要

JavaScript の HTTP Client も色々ある。

# 非同期呼出の実現方式 外部のパッケージ（便利） 組込み（基礎的）
1 コールバック jQuery xhr
2 Promise (JavaScript) axios fetch

fetch (Fetch API)

サンプル（fetch）

クロスドメイン（fetch）

→ クロスドメイン

参考（fetch）

axios

サンプル（axios）

（元 Wiki では未記載）

クロスドメイン（axios）

参考（axios）

jQuery.ajax()

HTTPリクエストを使用してデータを取得するajax の最も低レベルな実装。

以下の様なメソッドも存在する。

  • jQuery.get()
  • jQuery.post()

サンプル（jQuery）

POST

以下のjQuery.ajaxによるPOSTのサンプル・スニペットを使用すれば色々なパターンを処理可能。

$('#btnTest').click(function () {
    $.ajax({
        type: 'post',
        url: 'http://・・・',
        crossDomain: true,
        contentType: 'application/x-www-form-urlencoded',
        headers: {
            'Authorization': 'Bearer ' + token
        },
        data: {
            client_id: '・・・',
            client_secret: '・・・',
        },
        xhrFields: {
            withCredentials: true
        },
        success: function (responseData, textStatus, jqXHR) {
            alert(textStatus + ', ' + responseData);
        },
        error: function (responseData, textStatus, errorThrown) {
            alert(textStatus + ', ' + errorThrown.message);
        }
    });
});

GET

上記を、GETもイケるよう、改造した。

urlに'get'を、postdataにはnullを指定する。

function CallOAuthAPI(url, httpMethod, postdata) {
    $.ajax({
        type: httpMethod,
        url: url,
        crossDomain: true,
        headers: {
            'Authorization': 'Bearer ' + token
        },
        data: postdata,
        xhrFields: {
            withCredentials: true
        },
        success: function (responseData, textStatus, jqXHR) {
            alert(textStatus + ', ' + responseData);
        },
        error: function (responseData, textStatus, errorThrown) {
            alert(textStatus + ', ' + errorThrown.message);
        }
    });
}

JSON

以下は、Web Storageからkey, valueをJSONでPOSTする例。
JSON文字列へのシリアライズ処理には JSON.stringify()（JSONのparseを色々試してみた。の該当節を参照）を使用する

// ---------------------------------------------------------------
// Web Storageからkey, valueをJSONでPOSTする。
// ---------------------------------------------------------------
// 引数    url : POST先のURL
// 戻り値  －
// ---------------------------------------------------------------
function PostJsonWebStorage(url) {
    // Web Storageのすべての情報の取得
    var jsonArray = new Array();

    for (var i = 0; i < storage.length; i++) {
        var _key = storage.key(i);

        // Web Storageのキーと値を表示
        var jsonBean = {
            key: _key,
            value: storage.getItem(_key)
        };

        jsonArray.push(jsonBean);
    }

    // <p id="url"></p> に表示
    if (document.getElementById("url") != null) {
        $("#url").text(url);
    }
    // <p id="request"></p> に表示
    if (document.getElementById("request") != null) {
        $("#request").text("request:" + JSON.stringify(jsonArray).toString());
    }

    CallService("POST", url, JSON.stringify(jsonArray), "application/json; charset=utf-8", "JSON", false);
}

// ---------------------------------------------------------------
// ajax
// ---------------------------------------------------------------
// 引数
//         Type : GET or POST or PUT or DELETE verb
//         Url : Location of the service
//         Data : Data sent to server
//         ContentType : Content type sent to server
//         DataType : Expected data format from server
//         ProcessData : True or False
// 戻り値  －
// ---------------------------------------------------------------
function CallService(Type, Url, Data, ContentType, DataType, ProcessData) {
    $.ajax({
        type: Type,
        url: Url,
        data: Data,
        cache: false,
        contentType: ContentType,
        dataType: DataType,
        processdata: ProcessData,
        success: function (data) {
            // On Successfull service call
            ServiceSucceeded(data);
        },
        error: function (data) {
            // When Service call fails
            ServiceFailed(data);
        }
    });
}

クロスドメイン（jQuery）

contentTypeとdataTypeの違い

contentType

  • サーバにデータを送信する際に用いるcontent-typeヘッダの値
  • 既定値は"application/x-www-form-urlencoded"。
  • JSONを送信する場合は"application/json"とする。

dataType

  • サーバから返されるデータの型を指定する。
  • 既定値ではjQueryがMIMEタイプなどを見ながら自動的に判別。
  • JSONを受信する場合は"json"とすると、JavaScriptのオブジェクトに変換される。

参考（jQuery）

xhr (XMLHttpRequest)

  • Ajaxの基幹技術。

  • JavaScriptなどのブラウザ上のスクリプト言語から
    HTTP通信を行うための、組み込みオブジェクト（API）。

サンプル（xhr）

（元 Wiki では未記載）

クロスドメイン（xhr）

  • XMLHttpRequest Level 2ではクロスドメインへのアクセスに対応

  • IE8, 9では XMLHttpRequest の代わりに XDomainRequest を使う

  • （X-Requested-Withのような）カスタムヘッダを付けるとGETリクエストでもプリフライトする。

  • 参考

参考（xhr）

参考

クロスドメイン

移行メモ

  • 「JSON文字列へのデシリアライズ処理には JSON.stringify() を使用する」は、 JSON.stringify() がシリアライズ（JSON 文字列化）を行うメソッドのため 「シリアライズ処理」に修正した。
  • 参考の「javascript - Differences between contentType and dataType in jQuery ajax function - Stack Overflow」は、URL の位置に同じ表題が入っており リンク先が不明のため、その旨を注記した。
  • 「サンプル」（axios / xhr）は「...。」のみだったため、未記載である旨を明示した。
  • 同名の見出し（「サンプル」「クロスドメイン」「参考」）が複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの CORS (Cross-Origin Resource Sharing) / JSONのparseを色々試してみた。 に張り替えた。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替えた。

Tags: 移行, JavaScript, HTTP Client, fetch, axios, jQuery, XMLHttpRequest, Ajax, CORS

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally