![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。 目次 †概要 †JavaScript の HTTP Client も色々ある。 fetch (Fetch API) †サンプル †
クロスドメイン †
参考 †
axios †サンプル †...。 クロスドメイン †
参考 †
jQuery.ajax() †HTTPリクエストを使用してデータを取得するajax の最も低レベルな実装。 以下の様なメソッドも存在する。
サンプル †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する例。 // ---------------------------------------------------------------
// 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);
}
});
}
クロスドメイン †
contentTypeとdataTypeの違い †contentType †
dataType †
参考 †
xhr (XMLHttpRequest?) †
サンプル †...。 クロスドメイン †
参考 †
参考 †
クロスドメイン † |
