「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>JavaScript]]

*目次 [#kacd554a]
#contents

*概要 [#b687ec4b]
JavaScript の HTTP Client も色々ある。

|#|非同期呼出の実現方式|外部のパッケージ(便利)|組込み(基礎的)|h
|1|コールバック|[[jQuery>#p5df5fa0]]|[[xhr>#f9c4f46d]]|
|2|[[Promise>Promise (JavaScript)]]|[[axios>#g5a42e0f]]|[[fetch>#h1497438]]|

*fetch (Fetch API) [#h1497438]

**サンプル [#u48368e4]
-https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/react_template/src/common.js
-https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/react_template/src/components/CrudSample.js
-https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/react_template/src/components/CrudSample2.js
-react_template
--https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/react_template/src/common.js
--https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/react_template/src/components/CrudSample.js
--https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/react_template/src/components/CrudSample2.js

-redux_template
--https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/redux_template/src/common.js
--https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/redux_template/src/components/CrudSample.js
--https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/redux_template/src/components/CrudSample2.js

**[[クロスドメイン>#a7c6c2a8]] [#b522059a]

-参考
--Fetch: クロスオリジン(Cross-Origin) リクエスト~
https://ja.javascript.info/fetch-crossorigin

**参考 [#jd515dde]
-Fetch API - Web API | MDN~
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

*axios  [#g5a42e0f]

**サンプル [#n0fd625b]
...。

**[[クロスドメイン>#a7c6c2a8]] [#pb7a92c3]
-以下を見ると、クライアント側は特に何もしなくて良さそう。

-参考
--corsに悩まされるな。axios でcorsを攻略する - Qiita~
https://qiita.com/inatatsu_csg/items/15f63be00096ec21535e
--axios で CORS によるクロスドメイン通信するとき - Qiita~
https://qiita.com/naoiwata/items/59f2a7b2899ec8fef975

**参考 [#z90321c0]
-axios/axios: Promise based HTTP client for the browser and node.js~
https://github.com/axios/axios

*jQuery.ajax() [#p5df5fa0]
HTTPリクエストを使用してデータを取得するajax の最も低レベルな実装。

以下の様なメソッドも存在する。
-jQuery.get()
-jQuery.post()

**サンプル [#uaba5c4a]

***POST [#wbcbc8d7]
以下の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 [#o77cd2c8]
上記を、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 [#o10807ea]
以下は、Web Storageからkey, valueをJSONでPOSTする例。~
JSON文字列へのデシリアライズ処理には[[JSON.stringify()>JSONのparseを色々試してみた。#e56c0f75]]を使用する

 // ---------------------------------------------------------------
 // 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);
         }
     });
 }

**[[クロスドメイン>#a7c6c2a8]] [#m098305b]
-crossDomain: trueを追加する。
-下位が[[xhr (XMLHttpRequest)>#f9c4f46d]]なので
--XDomainRequest等の切り替えは自動的に行われる。
--対応したカスタムヘッダ設定が必要なこともある。

-参考

--[[javascript - jQueryのcrossDomainオプションが効かない - スタック・オーバーフロー>https://ja.stackoverflow.com/questions/5406/jquery%E3%81%AEcrossdomain%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84]]
--[jquery] ajaxのクロスドメイン対応における~
「プリフライトの動作」の有無について:なんとなしの日記~
http://babyp.blog55.fc2.com/blog-entry-979.html

**contentTypeとdataTypeの違い [#x04418b0]

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

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

**参考 [#id231190]

-jQuery API Documentation
--jQuery.ajax()~
http://api.jquery.com/jquery.ajax/
--jQuery.get()~
http://api.jquery.com/jQuery.get/
--jQuery.post()~
http://api.jquery.com/jQuery.post/

-jQuery 日本語リファレンス
--jQuery.ajax(options) - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
--jQuery.get( url, data, callback ) - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/ajax/jQuery.get/+url%2C+data%2C+callback+/
--jQuery.post( url, data, callback, type ) - ~
http://semooh.jp/jquery/api/ajax/jQuery.post/+url%2C+data%2+callback%2C+type+/

-javascript - Differences between contentType and dataType in jQuery ajax function - Stack Overflow~
Differences between contentType and dataType in jQuery ajax function

*xhr (XMLHttpRequest) [#f9c4f46d]
-Ajaxの基幹技術。

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

**サンプル [#t2ef68f0]
...。

**[[クロスドメイン>#a7c6c2a8]] [#u0a92c74]
-XMLHttpRequest Level 2では[[クロスドメイン>#a7c6c2a8]]へのアクセスに対応

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

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

-参考
--XMLHttpRequest Level2 + CORSの時の設定メモ - blog::wnotes.net~
https://blog.wnotes.net/posts/xhr-lv2-cors-settings/

**参考 [#ac5a6be9]
-XMLHttpRequest - Web API | MDN~
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

-XMLHttpRequest - Wikipedia~
https://ja.wikipedia.org/wiki/XMLHttpRequest

*参考 [#ee90d7ba]
-ajaxまとめ(xhr, jquery, axios, fetch) | 感情的プログラミング伝記~
| タウン情報誌 AIR函館 - 北海道函館市の食・呑・遊をご紹介!~
https://www.air-h.jp/articles/emopro/ajax%E3%81%BE%E3%81%A8%E3%82%81xhr-jquery-axios-fetch/

**クロスドメイン [#a7c6c2a8]
-[[CORS (Cross-Origin Resource Sharing) - マイクロソフト系技術情報 Wiki>https://techinfoofmicrosofttech.osscons.jp/index.php?CORS%20%28Cross-Origin%20Resource%20Sharing%29]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS