- 追加された行はこの色です。
- 削除された行はこの色です。
「[[.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]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
