Coffeescript 简明教程

CoffeeScript - Ajax

AJAX 是创建交互式 Web 应用程序的 Web 开发技术。

AJAX is a web development technique for creating interactive web applications.

AJAX stands for *A*synchronous *Ja*vaScript and *X*ML. It is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.
Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.
Conventional web applications transmit information to and from the server using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.
With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
AJAX is a web browser technology independent of web server software.
A user can continue to use the application while the client program requests information from the server in the background.

* *一般来说，我们使用jQuery来使用Ajax。以下是Ajax和jQuery的一个例子

In general, we use jQuery to work with Ajax. Following is an example of Ajax and 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/result.html');
            });
         });
      </script>
   </head>

   <body>

      <p>Click on the button to load /jquery/result.html file −</p>

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

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

   </body>

</html>

* 这里 *load() 初始化了一个Ajax请求到指定的URL /coffeescript/result.html 文件。加载此文件后，所有内容将被填充到带ID舞台的<div>标记中。假设我们的/jquery/result.html文件只有一行HTML −

Here load() initiates an Ajax request to the specified URL /coffeescript/result.html file. After loading this file, all the content would be populated inside <div> tagged with ID stage. Assuming that our /jquery/result.html file has just one HTML line −

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

* *当你点击给定的按钮，result.html文件就会被加载。

When you click the given button, then result.html file gets loaded.

CoffeeScript with Ajax

* *我们可以使用CoffeeScript重新编写上面的示例，如下所示。

We can rewrite the above example using CoffeeScript as shown below.

<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/result.html'
            return
          return
      </script>
   </head>

   <body>

      <p>Click on the button to load /jquery/result.html file -</p>

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

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

   </body>

</html>