「[[.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 も色々ある。


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

**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
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS