Jquery ajax()方法

AJAX是
异步JavaScript和XML 的首字母缩写。它是一组相互关联的技术，例如 JavaScript，DOM，XML， HTML/XHTML， CSS，XMLHttpRequest等。它允许我们发送并异步接收数据，而无需重新加载网页。

jQuery中的
ajax()方法执行 AJAX请求。它将异步HTTP请求发送到服务器。 JQuery提供了许多用于开发Web应用程序的AJAX方法。

使用ajax()方法的语法如下。

语法

 $.ajax({name:value, name:value, ... })

参数值

此方法可以为AJAX请求提供多个名称/值对。名称和值在下表中定义。

名称	值
async	它是一个布尔值。它的默认值为 true ，这意味着默认情况下，请求是异步处理的。对于同步请求，我们可以将其设置为 false 。
beforeSend(xhr)	它是在发送请求之前执行的回调函数。
cache	它是一个布尔值。其默认值为 true 。它表示浏览器是否缓存请求的页面。将其设置为 false 时，它将强制页面不被浏览器缓存。
complete(xhr, status)	是请求完成后执行的回调函数。它有两个参数，分别是 *xhr(XMLHttpRequest)* 和状态。状态可以是"成功"，"未修改"，"无内容"，"错误"等。它是请求完成后执行的回调函数。它具有两个参数xhr(XMLHttpRequest)和一个状态。状态可以是"成功"，"未修改"，"无内容"，"错误"等。
contentType	在将数据发送到服务器时使用。其默认值为" application/x-www-form-urlencoded"。
data	它是发送到服务器的数据。它可以是字符串，数组或JSON对象。
dataFilter(data, type)	这是一个处理XMLHttpRequest的原始响应数据的函数。它接受两个参数。
dataType	这是我们期望服务器提供的数据类型。
error(xhr, status, error)	这是一个回调函数，当请求失败时将执行该函数。它接受三个参数。
global	它是一个布尔值。其默认值为 true 。它表示是否触发全局AJAX事件处理程序。
ifModified	它是一个布尔值。其默认值为 false 。如果响应自上一个标头以来已发生更改，它将指定一个成功的请求。
jsonp	它是一个字符串，它将覆盖jsonp请求中的回调函数名称。
jsonpCallback	这是一个字符串，其中包含jsonp请求的回调函数的名称。
password	它用于指定HTTP访问身份验证请求中使用的密码。
processData	它是一个布尔值。其默认值为 true 。用于指定是否将与请求一起发送的数据转换为查询字符串。
scriptCharset	它指定请求的字符集。仅在使用"脚本"传输时适用。
success(result, status, xhr)	顾名思义，该回调函数在请求成功时执行。它接受三个参数。
timeout	这是请求的超时时间(以毫秒为单位)。如果将其设置为值 0 ，则表示没有超时。
traditional	它是一个布尔值。如果要使用传统的参数序列化样式，可以将其设置为 true 。
type	它指定http请求的类型，例如 POST，PUT，和 GET 。默认值为GET。
url	这是请求发送到的URL。默认值为当前页面。
username	这是将在HTTP访问身份验证请求中使用的用户名。
xhr	这是一个回调函数，用于创建XMLHttpRequest对象。

通过一些说明让我们了解
ajax()方法的使用。

示例1

有下面给出了一些步骤。请按照以下步骤操作，以更清楚地了解
ajax()方法的使用。

首先，我们必须下载jQuery库或通过访问其官方网站来查找jQuery最新版本的链接。
其次，我们需要创建一个HTML文档，包括jQuery库。
最后，在 <script>标签内编写jQuery的 ready() 函数，并在其主体中编写 ajax() 方法。现在，我们可以将参数传递给 ajax() 函数。我们必须包含URL作为第一个属性发送请求。在 URL 之后，我们可以为ajax()函数设置任何可选属性，例如 type，async，cache，success，error，complete 等。

现在，让我们看看使用
ajax() < /strong>方法的代码。在此示例中，我们包括 URL 参数和可选的 type 参数。在此示例中， ajax() 方法用于通过ajax请求添加内容。

在这里，我们传递了 test.html 到 ajax() 方法的 < strong> URL 参数。

test.html

 <h1> Hello World </h1>
 <h2> Welcome to the bianchenghao6.com </h2>

Example2.html

 <!DOCTYPE html>
 <html>
 <head>
 <script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("button").click(function(){
 jQuery.ajax({
 url: 'test.html',
 type: 'GET',
   success: function(data) {
     $("#para").html(data); 
   }
 });
   });
 });
 </script>
 </head>
 <body>
 <h3> This is an example of using the jQuery's ajax() method. </h3>
 <h4> Click the following button to see the effect. </h4>
 <button> Click me </button>
 <p id = "para"></p>
 </body>
 </html>

输出

This is an example of using the jQuery's ajax() method.

Click the following button to see the effect.

Example2

这是使用
ajax()方法的另一个示例。在这里，我们使用可选的
async 属性，并将其设置为
false 用于异步请求。

test.html

 <h1> Hello World </h1>
 <h2> Welcome to the bianchenghao6.com </h2>

Example2.html

 <!DOCTYPE html>
 <html>
 <head>
 <script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("button").click(function(){
 jQuery.ajax({
 url: 'test.html',
 type: 'GET',
 async: false,
   success: function(res) {
     $("#para").html(res); 
   }
 });
   });
 });
 </script>
 </head>
 <body>
 <h3> This is an example of using the jQuery's ajax() method. </h3>
 <h4> Click the following button to see the effect. </h4>
 <button> Click me </button>
 <p id = "para"></p>
 </body>
 </html>

输出

This is an example of using the jQuery's ajax() method.

Click the following button to see the effect.

Example3

这是另一个使用
ajax()方法的示例。在这里，我们将
.js 文件传递到
ajax()方法的
URL 参数。我们还使用了可选的
dataType 参数并将其设置为脚本值。

test.js

 alert("Welcome to the bianchenghao6.com \n This alert is load by the AJAX");

Example2.html

 <!DOCTYPE html>
 <html>
 <head>
 <script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("button").click(function(){
     $.ajax({url: "test.js", dataType: "script"});
   });
 });
 </script>
 </head>
 <body>
 <h3> This is an example of using the jQuery's ajax() method. </h3>
 <h4> Click the following button to see the effect. </h4>
 <button> Click me </button>
 <p id = "para"></p>
 </body>
 </html>

输出

This is an example of using the jQuery's ajax() method.

Click the following button to see the effect.

以上示例将帮助您理解
ajax()方法的概念。

Jquery children()方法

Jquery delegate()