「[[.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]]| *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 *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 *fetch (Fetch API) [#h1497438] **サンプル [#u48368e4] ...。 **[[クロスドメイン>#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 *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]]