JavaScript の HTTP Client
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>JavaScript]]
*目次 [#kacd554a]
#contents
*概要 [#b687ec4b]
JavaScript の HTTP Client も色々ある。
|#|非同期呼出の実現方式|外部のパッケージ（便利）|組込み（...
|1|コールバック|[[jQuery>#p5df5fa0]]|[[xhr>#f9c4f46d]]|
|2|[[Promise>Promise (JavaScript)]]|[[axios>#g5a42e0f]]|[...
*fetch (Fetch API) [#h1497438]
**サンプル [#u48368e4]
-react_template
--https://github.com/OpenTouryoProject/FrontendTemplates/...
--https://github.com/OpenTouryoProject/FrontendTemplates/...
--https://github.com/OpenTouryoProject/FrontendTemplates/...
-redux_template
--https://github.com/OpenTouryoProject/FrontendTemplates/...
--https://github.com/OpenTouryoProject/FrontendTemplates/...
--https://github.com/OpenTouryoProject/FrontendTemplates/...
**[[クロスドメイン>#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 a...
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, jqX...
alert(textStatus + ', ' + responseData);
},
error: function (responseData, textStatus, error...
alert(textStatus + ', ' + errorThrown.messag...
}
});
});
***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, jqX...
alert(textStatus + ', ' + responseData);
},
error: function (responseData, textStatus, error...
alert(textStatus + ', ' + errorThrown.messag...
}
});
}
***JSON [#o10807ea]
以下は、Web Storageからkey, valueをJSONでPOSTする例。~
JSON文字列へのデシリアライズ処理には[[JSON.stringify()>JS...
// -----------------------------------------------------...
// 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(j...
}
CallService("POST", url, JSON.stringify(jsonArray), ...
}
// -----------------------------------------------------...
// 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, DataT...
$.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オプションが効かない ...
--[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%...
--jQuery.post( url, data, callback, type ) - ~
http://semooh.jp/jquery/api/ajax/jQuery.post/+url%2C+data...
-javascript - Differences between contentType and dataTyp...
Differences between contentType and dataType in jQuery aj...
*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::wnot...
https://blog.wnotes.net/posts/xhr-lv2-cors-settings/
**参考 [#ac5a6be9]
-XMLHttpRequest - Web API | MDN~
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequ...
-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%...
**クロスドメイン [#a7c6c2a8]
-[[CORS (Cross-Origin Resource Sharing) - マイクロソフト...
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>JavaScript]]
*目次 [#kacd554a]
#contents
*概要 [#b687ec4b]
JavaScript の HTTP Client も色々ある。
|#|非同期呼出の実現方式|外部のパッケージ（便利）|組込み（...
|1|コールバック|[[jQuery>#p5df5fa0]]|[[xhr>#f9c4f46d]]|
|2|[[Promise>Promise (JavaScript)]]|[[axios>#g5a42e0f]]|[...
*fetch (Fetch API) [#h1497438]
**サンプル [#u48368e4]
-react_template
--https://github.com/OpenTouryoProject/FrontendTemplates/...
--https://github.com/OpenTouryoProject/FrontendTemplates/...
--https://github.com/OpenTouryoProject/FrontendTemplates/...
-redux_template
--https://github.com/OpenTouryoProject/FrontendTemplates/...
--https://github.com/OpenTouryoProject/FrontendTemplates/...
--https://github.com/OpenTouryoProject/FrontendTemplates/...
**[[クロスドメイン>#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 a...
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, jqX...
alert(textStatus + ', ' + responseData);
},
error: function (responseData, textStatus, error...
alert(textStatus + ', ' + errorThrown.messag...
}
});
});
***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, jqX...
alert(textStatus + ', ' + responseData);
},
error: function (responseData, textStatus, error...
alert(textStatus + ', ' + errorThrown.messag...
}
});
}
***JSON [#o10807ea]
以下は、Web Storageからkey, valueをJSONでPOSTする例。~
JSON文字列へのデシリアライズ処理には[[JSON.stringify()>JS...
// -----------------------------------------------------...
// 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(j...
}
CallService("POST", url, JSON.stringify(jsonArray), ...
}
// -----------------------------------------------------...
// 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, DataT...
$.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オプションが効かない ...
--[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%...
--jQuery.post( url, data, callback, type ) - ~
http://semooh.jp/jquery/api/ajax/jQuery.post/+url%2C+data...
-javascript - Differences between contentType and dataTyp...
Differences between contentType and dataType in jQuery aj...
*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::wnot...
https://blog.wnotes.net/posts/xhr-lv2-cors-settings/
**参考 [#ac5a6be9]
-XMLHttpRequest - Web API | MDN~
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequ...
-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%...
**クロスドメイン [#a7c6c2a8]
-[[CORS (Cross-Origin Resource Sharing) - マイクロソフト...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
