Coffeescript 简明教程
CoffeeScript - Ajax
AJAX 是创建交互式 Web 应用程序的 Web 开发技术。
-
* * 异步*爪*瓦*脚*本和*X*ML。这是一种使用XML、HTML、CSS和JavaScript创建一个更好、更快、更具有交互性的Web应用程序的新技术。
-
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() 初始化了一个Ajax请求到指定的URL /coffeescript/result.html 文件。加载此文件后，所有内容将被填充到带ID舞台的<div>标记中。假设我们的/jquery/result.html文件只有一行HTML −
<h1>THIS IS RESULT...</h1>-
* *当你点击给定的按钮，result.html文件就会被加载。
CoffeeScript with 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="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>