CoffeeScript Ajax
AJAX 是一种用于创建交互式 Web 应用程序的 Web 开发技术。
AJAX 代表 A同步 JavaScript 和 XML。这是一种借助 XML、HTML、CSS 和 Java Script 创建更好、更快、交互性更强的网络应用程序的新技术。
Ajax 将 XHTML 用于内容,CSS 用于表示,以及文档对象模型和 JavaScript 用于动态内容显示。
传统的 Web 应用程序使用同步请求在服务器之间传输信息。这意味着您填写表单,点击提交,然后被定向到包含来自服务器的新信息的新页面。
使用 AJAX,当您点击提交时,JavaScript 将向服务器发出请求、解释结果并更新当前屏幕。在最纯粹的意义上,用户永远不会知道任何东西都被传输到了服务器。
XML 通常用作接收服务器数据的格式,但可以使用任何格式,包括纯文本。
AJAX 是一种独立于网络服务器软件的网络浏览器技术。
当客户端程序在后台从服务器请求信息时,用户可以继续使用该应用程序。
一般来说,我们使用 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 标记的 <div> 中。假设我们的/jquery/result.html 文件只有一行 HTML-
<h1>this IS RESULT...</h1>
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="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>