AJAX

优质

小牛编辑

135浏览

2023-12-01

AJAX是Asynchronous JavaScript和XML的缩写，这项技术可以帮助我们在没有浏览器页面刷新的情况下从服务器加载数据。

如果您是AJAX的新手，我建议您在继续之前先阅读我们的Ajax教程。

JQuery是一个很棒的工具，它提供了丰富的AJAX方法来开发下一代Web应用程序。

加载简单数据

使用JQuery AJAX可以非常轻松地加载任何静态或动态数据。 JQuery提供了load()方法来完成这项工作 -

语法 (Syntax)

这是load()方法的简单语法 -

<b>[selector].</b>load( URL, [data], [callback] );

以下是所有参数的说明 -

URL - 请求发送到的服务器端资源的URL。它可以是CGI，ASP，JSP或PHP脚本，它们动态地或从数据库中生成数据。
data - 此可选参数表示一个对象，其属性被序列化为要传递给请求的正确编码参数。如果指定，则使用POST方法发出请求。如果省略，则使用GET方法。
callback - 在将响应数据加载到匹配集的元素之后调用的回调函数。传递给此函数的第一个参数是从服务器接收的响应文本，第二个参数是状态代码。

例子 (Example)

考虑以下带有小型JQuery编码的HTML文件 -

<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 /jquery/result.html文件发起Ajax请求。加载此文件后，所有内容都将填充在标有ID stage “div”中。假设，我们的/jquery/result.html文件只有一行HTML -

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

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

获取JSON数据

服务器会根据您的请求返回JSON字符串。 JQuery实用程序函数getJSON()解析返回的JSON字符串，并将结果字符串作为第一个参数提供给回调函数以采取进一步操作。

语法 (Syntax)

以下是getJSON()方法的简单语法 -

<b>[selector].</b>getJSON( URL, [data], [callback] );

以下是所有参数的说明 -

URL - 通过GET方法联系的服务器端资源的URL。
data - 一个对象，其属性用作名称/值对，用于构造要附加到URL的查询字符串，或预格式化和编码的查询字符串。
callback - 请求完成时调用的函数。将响应主体消化为JSON字符串所产生的数据值作为第一个参数传递给此回调，状态作为第二个参数传递。

例子 (Example)

考虑以下带有小型JQuery编码的HTML文件 -

<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){
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
            });
         });
      </script>
   </head>
   <body>
      <p>Click on the button to load result.json file −</p>
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

这里JQuery实用程序方法getJSON()向指定的URL result.json文件发起Ajax请求。加载此文件后，所有内容都将传递给回调函数，该函数最终将填充在标有ID stage “div”中。假设，我们的result.json文件具有以下json格式的内容 -

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

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

将数据传递到服务器

很多时候，您从用户收集输入，并将该输入传递给服务器以进行进一步处理。 JQuery AJAX使用任何可用的Ajax方法的data参数将收集的数据传递到服务器变得非常容易。

例子 (Example)

此示例演示了如何将用户输入传递给Web服务器脚本，该脚本将返回相同的结果并打印出来 -

<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){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

这是用result.php脚本编写的代码 -

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

现在，您可以在给定的输入框中输入任何文本，然后单击“显示结果”按钮以查看您在输入框中输入的内容。

JQuery AJAX方法

您已经使用JQuery看到了AJAX的基本概念。下表列出了您可以根据编程需要使用的所有重要的JQuery AJAX方法 -

Sr.No.	方法和描述
1	jQuery.ajax( options ) 使用HTTP请求加载远程页面。
2	jQuery.ajaxSetup( options ) 设置AJAX请求的全局设置。
3	jQuery.get（url，[data]，[callback]，[type]）使用HTTP GET请求加载远程页面。
4	jQuery.getJSON（url，[data]，[callback]）使用HTTP GET请求加载JSON数据。
5	jQuery.getScript（url，[callback]）使用HTTP GET请求加载并执行JavaScript文件。
6	jQuery.post（url，[data]，[callback]，[type]）使用HTTP POST请求加载远程页面。
7	load（url，[data]，[callback]）从远程文件加载HTML并将其注入DOM。
8	serialize（）将一组输入元素序列化为一串数据。
9	serializeArray（）序列化所有表单和表单元素，如.serialize（）方法，但返回一个JSON数据结构供您使用。

JQuery AJAX事件

您可以在AJAX调用进度的生命周期中调用各种JQuery方法。根据不同的事件/阶段，可提供以下方法 -

您可以浏览所有AJAX事件。

Sr.No.	方法和描述
1	ajaxComplete( callback ) 附加一个AJAX请求完成时要执行的函数。
2	ajaxStart( callback ) 每当AJAX请求开始并且没有任何活动已经激活时，附加要执行的函数。
3	ajaxError( callback ) 每当AJAX请求失败时附加要执行的函数。
4	ajaxSend( callback ) 在发送AJAX请求之前附加要执行的函数。
5	ajaxStop( callback ) 在所有AJAX请求结束时附加要执行的函数。
6	ajaxSuccess( callback ) 每当AJAX请求成功完成时，附加要执行的函数。

Sr.No.	方法和描述
1	jQuery.ajax( options ) 使用HTTP请求加载远程页面。
2	jQuery.ajaxSetup( options ) 设置AJAX请求的全局设置。
3	jQuery.get（url，[data]，[callback]，[type]）使用HTTP GET请求加载远程页面。
4	jQuery.getJSON（url，[data]，[callback]）使用HTTP GET请求加载JSON数据。
5	jQuery.getScript（url，[callback]）使用HTTP GET请求加载并执行JavaScript文件。
6	jQuery.post（url，[data]，[callback]，[type]）使用HTTP POST请求加载远程页面。
7	load（url，[data]，[callback]）从远程文件加载HTML并将其注入DOM。
8	serialize（）将一组输入元素序列化为一串数据。
9	serializeArray（）序列化所有表单和表单元素，如.serialize（）方法，但返回一个JSON数据结构供您使用。