Ajax

优质

小牛编辑

132浏览

2023-12-01

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

AJAX代表A同步Ja vaScript和X ML。它是一种借助XML，HTML，CSS和Java Script创建更好，更快，更交互的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()向指定的URL /coffeescript/result.html文件发起Ajax请求。加载此文件后，所有内容都将填充在标有ID stage “div”中。假设我们的/jquery/result.html文件只有一行HTML -

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

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

使用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/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>