CoffeeScript-Ajax

AJAXは、インタラクティブなWebアプリケーションを作成するためのWeb開発手法です。

AJAXは* A synchronous Ja * vaScriptおよび* X * MLの略です。これは、XML、HTML、CSS、およびJavaスクリプトの助けを借りて、より良く、より速く、よりインタラクティブなWebアプリケーションを作成するための新しい手法です。
Ajaxは、コンテンツにXHTMLを、プレゼンテーションにCSSを、ダイナミックコンテンツ表示にDocument Object ModelとJavaScriptを使用します。
従来のWebアプリケーションは、同期要求を使用してサーバーとの間で情報を送信します。これは、フォームに入力し、送信をクリックして、サーバーからの新しい情報を含む新しいページにリダイレクトされることを意味します。
AJAXを使用すると、送信を押すと、JavaScriptがサーバーにリクエストを行い、結果を解釈して、現在の画面を更新します。最も純粋な意味では、ユーザーはサーバーに何かが送信されたことさえ知らないでしょう。
通常、XMLはサーバーデータを受信するための形式として使用されますが、プレーンテキストを含む任意の形式を使用できます。
AJAXは、Webサーバーソフトウェアに依存しないWebブラウザーテクノロジーです。
クライアントプログラムがバックグラウンドでサーバーに情報を要求している間、ユーザーはアプリケーションを引き続き使用できます。

一般に、jQueryを使用してAjaxを操作します。以下はAjaxとjQueryの例です

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/resultl');
            });
         });
      </script>
   </head>

   <body>

      <p>Click on the button to load/jquery/resultl file −</p>

      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Load Data"/>

   </body>

</html>

ここで* load（）は、指定されたURL */coffeescript/resultl ファイルへのAjaxリクエストを開始します。このファイルをロードすると、ID _stage_でタグ付けされた<div>内にすべてのコンテンツが入力されます。/jquery/resultlファイルにHTML行が1つしかないと仮定します-

<h1>THIS IS RESULT...</h1>

指定されたボタンをクリックすると、結果ファイルがロードされます。

Ajaxを使用したCoffeeScript

以下に示すように、CoffeeScriptを使用して上記の例を書き換えることができます。

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>

      <script type="text/coffeescript">
        $(document).ready ->
          $('#driver').click (event) ->
            $('#stage').load '/jquery/resultl'
            return
          return
      </script>
   </head>

   <body>

      <p>Click on the button to load/jquery/resultl file -</p>

      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Load Data"/>

   </body>

</html>

Coffeescript-ajax

CoffeeScript-Ajax

Ajaxを使用したCoffeeScript