jquery的ajax用法 jquery ajax同步 收藏 0

jquery ajax 函数用法详解

在前端开发中经常需要用到ajax请求后端接口，做异步请求，今天就来讲讲ajax函数的具体用法。

jQuery的$.ajax()函数是一种强大的工具，用于通过HTTP请求从服务器加载数据，而无需刷新整个页面。以下是对$.ajax()函数用法的详细解释：

1. 基本用法
2. 语法一：jQuery.ajax(settings)
3. 参数settings是一个对象，包含了所有发送请求所需的额外参数设置[^1^]。
4. 语法二：jQuery.ajax(url, settings)
5. 这是语法一的变体，将参数对象settings中的可选属性url单独提取出来作为一个独立的参数[^1^]。
6. 常用参数
7. url（String类型）：请求的URL地址[^1^]。
8. type（String类型）：请求类型，如“GET”或“POST”，默认为“GET”[^5^]。
9. async（Boolean类型）：是否为异步请求，默认为true。如果设置为false，请求将是同步的[^5^]。
10. beforeSend（Function类型）：在发送请求前可修改XMLHttpRequest对象的函数[^5^]。
11. cache（Boolean类型）：指示是否缓存请求，默认为true。设置为false将强制浏览器不缓存当前请求[^5^]。
12. data（任意类型）：发送到服务器的数据，可以是对象、字符串等[^5^]。
13. dataType（String类型）：预期服务器返回的数据类型，如“json”、“xml”、“html”等[^5^]。
14. success（Function类型）：请求成功时执行的回调函数[^5^]。
15. error（Function类型）：请求失败时执行的回调函数[^5^]。
16. complete（Function/Array类型）：请求完成后执行的回调函数，无论成功或失败都会调用[^1^]。
17. 示例代码

总结来说，jQuery的$.ajax()函数提供了一种灵活且强大的方式来进行Ajax请求。通过合理配置其参数，可以实现各种复杂的数据交互需求。然而，需要注意的是，随着技术的发展和Web标准的变化，现代Web开发中更推荐使用Fetch API或其他更现代的技术来处理异步请求。

Java学科：ajax的常用参数介绍

1）url:

　　要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2）type:

　　要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3）timeout:

　　要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4）async:

　　要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。

注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5）cache:

　　要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6）data:

　　要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData（防止自动转换）选项。对象必须为key/value格式，例如{foo1:\”bar1\”,foo2:\”bar2\”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[\”bar1\”,\”bar2\”]}转换为&foo=bar1&foo=bar2。

7）dataType:

　　要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

　　● xml：返回XML文档，可用JQuery处理。

　　● html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

　　● script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

　　● json：返回JSON数据。

　　● jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

　　● text：返回纯文本字符串。

8）beforeSend：

　　这个参数主要是为了在向服务器发送请求前，执行一些操作。要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

9）complete：

　　要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

10）success：

　　要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

（1）由服务器返回，并根据dataType参数进行处理后的数据。

（2）描述状态的字符串。

11）error:

要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

12）contentType：

要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为\”application/x-www-form-urlencoded\”。该默认值适合大多数应用场合。

13）dataFilter：

要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

14）dataFilter：

要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

15）global：

要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16）ifModified：

要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17）jsonp：

要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在\”callback=?\”这种GET或POST请求中URL参数里的\”callback\”部分，例如{jsonp:\’onJsonPLoad\’}会导致将\”onJsonPLoad=?\”传给服务器。

18）username：

要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19）password：

要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20）processData：

要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型\”application/x-www-form-urlencoded\”。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21）scriptCharset：

要求为String类型的参数，只有当请求时dataType为\”jsonp\”或者\”script\”，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

AJAX教程

关注我，带你了解java

一、AJAX简介

1.什么是AJAX？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

JavaScript:：使用脚本对象 XMLHttpRequest 发送请求， 接收响应数据

XML：发送和接收的数据格式，现在使用 json

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

2.原生JS实现AJAX

代码实现：

网页代码：

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）

1: 服务器连接已建立（open方法已经被调用）

2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）

3: 请求处理中（下载中，responseText 属性已经包含部分数据）

4: 请求已完成，且响应已就绪（下载操作已完成）

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

PS：Fetch polyfill 的基本原理是探测是否存在window.fetch方法，如果没有则用 XHR 实现。

3.JQuery的三种方式实现AJAX：

3.1 $.ajax()

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为\”jQuery中Ajax系列方法之母\”。

1.url：链接地址，字符串表示

2.data：需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}

3.type：“POST” 或 “GET”，请求类型

4.timeout：请求超时时间，单位为毫秒，数值表示

5.cache：是否缓存请求结果，bool表示

6.contentType：内容类型，默认为\”application/x-www-form-urlencoded\”

7.dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json

8.success：请求成功后，服务器回调的函数

9.error：请求失败后，服务器回调的函数

10.complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用

11.async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行

3.2 $.get()

$.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

语法：

参数介绍：

发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即即可

发起带参数的请求时，以参数对象的形式添加第二个参数

3.3 $.post()

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

语法：

参数介绍：

使用 $post() 向服务器提交数据

星辰大海，永不止步

END

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com