{"_id":"5544d76bd8833c0d00582837","version":{"_id":"5544d76ad8833c0d00582801","__v":1,"project":"55227389b4a0de0d00de7e28","forked_from":"55227389b4a0de0d00de7e2b","createdAt":"2015-05-02T13:55:54.059Z","releaseDate":"2015-05-02T13:55:54.059Z","categories":["5544d76ad8833c0d00582802","5544d76ad8833c0d00582803","5544d76ad8833c0d00582804","5544d76ad8833c0d00582805","5544d76ad8833c0d00582806"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.0.0","version":"4.0"},"category":{"_id":"5544d76ad8833c0d00582802","pages":["5544d76bd8833c0d00582832","5544d76bd8833c0d00582833","5544d76bd8833c0d00582834","5544d76bd8833c0d00582835","5544d76bd8833c0d00582836","5544d76bd8833c0d00582837","5544d76bd8833c0d00582838","5544d76bd8833c0d00582839","5544d76bd8833c0d0058283a","5544d76bd8833c0d0058283b","5544d76bd8833c0d0058283c","5544d76bd8833c0d0058283d"],"version":"5544d76ad8833c0d00582801","__v":1,"project":"55227389b4a0de0d00de7e28","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-06T11:52:42.014Z","from_sync":false,"order":0,"slug":"_","title":"コア"},"__v":1,"project":"55227389b4a0de0d00de7e28","user":"551952063414b40d00e470cb","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-06T12:02:56.562Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"CS-CartのAJAX 基本コンセプト\"\n}\n[/block]\nCS-CartはjQueryのAjaxメソッドに独自の拡張を加えて使用しています。\nコードは*/js/ajax.js* ファイルに書かれています。\n\nこれらを呼び出す手順は以下の通りです:\n\n1. `submitForm` (form のみ) – フォーム内のデータを抜き出し、送信準備をします。\n2. `request` – それぞれのコントローラー(dispatchからパース)にAJAXリクエストを送します。jQueryのajaxメソッドを使用します。\n3. `response` – `request` の実行が成功すると呼び出されます。実際のサーバーの応答と結果表示します。\n4. `inProgress` – AJAXリクエストが進行しているかどうか\n5. `clearCache` – レスポンスのキャッシュをクリア\n\nサーバーでAJAXリクエストが行われている時、AJAXリクエストのサブシステムの初期化は`fn_init_ajax` (*/functions/fn.init.php*) 機能によって実行されます。\nAJAXクラス(*/Tygh/Ajax.php*) のオブジェクトが作られます。\n\nAJAXリクエストの前後に必要な変換を実行し、さらに`response` へ変換するためJSON配列を生成します。これらの*AJAX_REQUEST* はPHPコードで利用することが出来ます。\n\nPHPファイルで以下のように*AJAX_REQUEST* を使用すると、AJAXリクエストが渡された場合のみで実行するコードを書くことが出来ます。\n\n###例:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<?php\\nif (defined('AJAX_REQUEST')) \\n{\\n  fn_set_notification('E', fn_get_lang_var('warning'), $msg, true, 'insecure_password');\\n}\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\nAJAXリクエストのスクリプトが完了、または終了関数`exit()` が明示的に呼び出されると、\nAJAXクラス(/Tygh/Ajax.php) のディストラクタが実行されます。  \nディストラクターはJSON形式のデータ配列にドキュメントに表示されるべき情報を渡し、その後、Javascriptの関数 `response` (*/js/tygh/ajax.js*) に配列を渡します。\n\nコントローラーは以下の形式でレスポンスを返します。\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"data:\\n    notifications:\\n        id:\\n            text\\n            title\\n        id:\\n            text\\n            title\\n        ...\\n    html:\\n        block_id:\\n            block_content\\n        block_id:\\n            block_content\\n        ...\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"マイクロフォーマットでAJAXを呼び出す\"\n}\n[/block]\nAJAXリクエストはリンクやフォームを使って送信することができます。どちらの場合もマイクロフォーマット`cm-ajax` はそれぞれの要素に指定する必要があります。\n\n-------\n\n##フォームの場合\nフォームに`cm-ajax` が書かれている場合、そのコンテンツはAJAXリクエストとしてアクション属性に定義されたURLに送信されます。\n\nそのようなフォームには`result_ids `と呼ばれる非表示の入力要素があります。\nそれにはAJAXデータで更新される要素の識別名が含まれていなければなりません。\n\nAJAXフォームの例\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- cm-ajaxクラスがついたフォームはindex.phpにAJAXリクエストとして送信されます -->\\n<form class=\\\"cm-ajax\\\" action=\\\"index.php\\\" method=\\\"post\\\" name=\\\"product_form_817\\\">\\n \\n<!-- 更新すべきHTMLエレメントのIDを値とするHiddenフィールド -->\\n    <input type=\\\"hidden\\\" name=\\\"result_ids\\\" value=\\\"my_id\\\" />\\n    ...\\n \\n<!-- このボタンが押された場合、index.phpにAJAXリクエストが送信されます -->\\n    <input id=\\\"button_cart_817\\\" type=\\\"submit\\\" name=\\\"dispatch[checkout.add..817]\\\" value=\\\"Add to cart\\\" />\\n    ...\\n</form>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n-------\n\n##リンクの場合\nリンクがクリックされた際、`cm-ajax` の書かれたリンクはhref属性で定義されたURLにAJAXリクエストを送信します。\n\n更新する要素のIDは`rev` 属性で指定する必要があります。\n\nAJAXリンクの例:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a class=\\\"cm-ajax\\\" rev=\\\"content_usergroups\\\" href=\\\"{\\\"profiles.request_usergroup?usergroup_id=`$usergroup.usergroup_id`&amp;status=`$ug_status`\\\"|fn_url}\\\">{$_link_text}</a>\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]\n-------\n\n## その他のマイクロフォーマット\n\nマイクロフォーマット`cm-ajax` はAJAXフォームやリンクのため必要不可欠です。  \nCS-Cartには開発者がAJAXを管理出来るるたくさんのオプションマイクロフォーマットがあります。\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"AJAXリクエストを直接使用する\"\n}\n[/block]\n明示的にメソッドを呼び出すことはCS-Cartのコーディングガイドラインでは推奨されていません。\n\nすべてのJavascript関数は別々のファイルに書き、CSSセレクタ(id,やclass など)を使用して、HTML要素に割り当てる必要があります。\n\nしかしながら、AJAXリクエストは`$.ceAjax()` メソッドは直接インライン・コールを送ることができます:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input id=\\\"enable_block_1\\\" type=\\\"checkbox\\\" name=\\\"enable_block_1\\\" value=\\\"Y\\\" onclick=\\\"$.ceAjax(‘request’, '{$index_script}?dispatch=block_manager.enable_disable&amp;block_id=1&amp;enable=' + (this.checked ? this.value : 'N'), {literal}{method: 'POST', cache: false}{/literal});\\\" />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"AJAXを使ったリクエストについて","slug":"using-ajax-requests","type":"basic","title":"ajaxリクエストの使用方法"}

ajaxリクエストの使用方法

AJAXを使ったリクエストについて

[block:api-header] { "type": "basic", "title": "CS-CartのAJAX 基本コンセプト" } [/block] CS-CartはjQueryのAjaxメソッドに独自の拡張を加えて使用しています。 コードは*/js/ajax.js* ファイルに書かれています。 これらを呼び出す手順は以下の通りです: 1. `submitForm` (form のみ) – フォーム内のデータを抜き出し、送信準備をします。 2. `request` – それぞれのコントローラー(dispatchからパース)にAJAXリクエストを送します。jQueryのajaxメソッドを使用します。 3. `response` – `request` の実行が成功すると呼び出されます。実際のサーバーの応答と結果表示します。 4. `inProgress` – AJAXリクエストが進行しているかどうか 5. `clearCache` – レスポンスのキャッシュをクリア サーバーでAJAXリクエストが行われている時、AJAXリクエストのサブシステムの初期化は`fn_init_ajax` (*/functions/fn.init.php*) 機能によって実行されます。 AJAXクラス(*/Tygh/Ajax.php*) のオブジェクトが作られます。 AJAXリクエストの前後に必要な変換を実行し、さらに`response` へ変換するためJSON配列を生成します。これらの*AJAX_REQUEST* はPHPコードで利用することが出来ます。 PHPファイルで以下のように*AJAX_REQUEST* を使用すると、AJAXリクエストが渡された場合のみで実行するコードを書くことが出来ます。 ###例: [block:code] { "codes": [ { "code": "<?php\nif (defined('AJAX_REQUEST')) \n{\n fn_set_notification('E', fn_get_lang_var('warning'), $msg, true, 'insecure_password');\n}", "language": "php" } ] } [/block] AJAXリクエストのスクリプトが完了、または終了関数`exit()` が明示的に呼び出されると、 AJAXクラス(/Tygh/Ajax.php) のディストラクタが実行されます。 ディストラクターはJSON形式のデータ配列にドキュメントに表示されるべき情報を渡し、その後、Javascriptの関数 `response` (*/js/tygh/ajax.js*) に配列を渡します。 コントローラーは以下の形式でレスポンスを返します。 [block:code] { "codes": [ { "code": "data:\n notifications:\n id:\n text\n title\n id:\n text\n title\n ...\n html:\n block_id:\n block_content\n block_id:\n block_content\n ...", "language": "json" } ] } [/block] [block:api-header] { "type": "basic", "title": "マイクロフォーマットでAJAXを呼び出す" } [/block] AJAXリクエストはリンクやフォームを使って送信することができます。どちらの場合もマイクロフォーマット`cm-ajax` はそれぞれの要素に指定する必要があります。 ------- ##フォームの場合 フォームに`cm-ajax` が書かれている場合、そのコンテンツはAJAXリクエストとしてアクション属性に定義されたURLに送信されます。 そのようなフォームには`result_ids `と呼ばれる非表示の入力要素があります。 それにはAJAXデータで更新される要素の識別名が含まれていなければなりません。 AJAXフォームの例 [block:code] { "codes": [ { "code": "<!-- cm-ajaxクラスがついたフォームはindex.phpにAJAXリクエストとして送信されます -->\n<form class=\"cm-ajax\" action=\"index.php\" method=\"post\" name=\"product_form_817\">\n \n<!-- 更新すべきHTMLエレメントのIDを値とするHiddenフィールド -->\n <input type=\"hidden\" name=\"result_ids\" value=\"my_id\" />\n ...\n \n<!-- このボタンが押された場合、index.phpにAJAXリクエストが送信されます -->\n <input id=\"button_cart_817\" type=\"submit\" name=\"dispatch[checkout.add..817]\" value=\"Add to cart\" />\n ...\n</form>", "language": "html" } ] } [/block] ------- ##リンクの場合 リンクがクリックされた際、`cm-ajax` の書かれたリンクはhref属性で定義されたURLにAJAXリクエストを送信します。 更新する要素のIDは`rev` 属性で指定する必要があります。 AJAXリンクの例: [block:code] { "codes": [ { "code": "<a class=\"cm-ajax\" rev=\"content_usergroups\" href=\"{\"profiles.request_usergroup?usergroup_id=`$usergroup.usergroup_id`&amp;status=`$ug_status`\"|fn_url}\">{$_link_text}</a>", "language": "php" } ] } [/block] ------- ## その他のマイクロフォーマット マイクロフォーマット`cm-ajax` はAJAXフォームやリンクのため必要不可欠です。 CS-Cartには開発者がAJAXを管理出来るるたくさんのオプションマイクロフォーマットがあります。 [block:api-header] { "type": "basic", "title": "AJAXリクエストを直接使用する" } [/block] 明示的にメソッドを呼び出すことはCS-Cartのコーディングガイドラインでは推奨されていません。 すべてのJavascript関数は別々のファイルに書き、CSSセレクタ(id,やclass など)を使用して、HTML要素に割り当てる必要があります。 しかしながら、AJAXリクエストは`$.ceAjax()` メソッドは直接インライン・コールを送ることができます: [block:code] { "codes": [ { "code": "<input id=\"enable_block_1\" type=\"checkbox\" name=\"enable_block_1\" value=\"Y\" onclick=\"$.ceAjax(‘request’, '{$index_script}?dispatch=block_manager.enable_disable&amp;block_id=1&amp;enable=' + (this.checked ? this.value : 'N'), {literal}{method: 'POST', cache: false}{/literal});\" />", "language": "html" } ] } [/block]