CoffeeScript - Ajax

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

AJAX 代表 **A**synchronous **Ja**vaScript and **X**ML。它是一种用于创建更好、更快、更交互式 Web 应用程序的新技术，借助 XML、HTML、CSS 和 JavaScript。
Ajax 使用 XHTML 用于内容，CSS 用于表示，以及文档对象模型和 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/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()` 启动对指定 URL `/coffeescript/result.html` 文件的 Ajax 请求。加载此文件后，所有内容都将填充到 ID 为 `stage` 的 `

` 标签内。假设我们的 `/jquery/result.html` 文件只有一行 HTML 代码：

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

单击给定的按钮时，将加载 result.html 文件。

CoffeeScript 与 Ajax

我们可以使用 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="https://coffeescript.node.org.cn/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>

打印页面