【精简版】jQuery 中的 Ajax 详解

目录

一、概念

二、jQuery 发送 GET 请求

三、jQuery 发送 POST 请求

四、$.ajax() 方法

1、含义

2、settings 选项

① type 属性

② async 属性

③ headers 属性

④ contentType 属性

⑤ processData 属性

⑥ data 属性

⑦ timeout 属性

⑧ beforeSend(jqXHR) 方法

⑨ success(data, textStatus, jqXHR) 方法

⑩ error(jqXHR, textStatus) 方法

⑪ complete(jqXHR, textStatus) 方法

五、扩展知识


一、概念

        众所周知,jQuery 是一个跨主流浏览器的 JavaScript 库,它封装了 JavaScript 的常用功能代码,简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject(IE9以下版本中)的封装,它提供了一种更加方便和强大的方式来与服务器进行数据交换,从而实现在不重新加载整个页面的情况下,对网页进行局部更新。

二、jQuery 发送 GET 请求

//$.ajax() 等同于 jQuery.ajax(),是 jQuery 提供的一个全局函数,用于发送 Ajax 请求。
//该函数接受一个配置对象作为参数,这个对象可以包含各种属性和方法,用于定义 Ajax 请求的不同方面。
$.ajax({//属性 type 用于指定请求类型(GET/POST),默认为 GET,其它 HTTP 请求方法仅部分浏览器支持。type: 'GET',//属性 url 用于指定请求地址。url: 'http://127.0.0.1:8080/getData',//属性 data 用于指定发送到服务器的数据,GET请求时 data 属性值将自动转换为查询字符串格式并附加在 URL 后。//如果 value 为数组,jQuery 将自动为不同值对应同一个名称,如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。data: {param1:value1, param2:value2},//方法 success(data, textStatus, jqXHR) 用于指定请求成功后的回调,其中参数 data 表示服务器的响应体信息;//textStatus 表示请求的状态,对于成功的请求,值通常是"success";//jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展,提供了更多的方法和属性来处理 HTTP 请求。success: function(data,textStatus,jqXHR){//XMLHttpRequest 对象的属性 status,用于表示服务器响应的 HTTP 状态码,如200表示成功,404表示未找到等。console.log(jqXHR.status);//XMLHttpRequest 对象的属性 statusText,用于表示服务器响应的状态描述,如"OK"、"Not Found"等。console.log(jqXHR.statusText);//XMLHttpRequest 对象的方法getAllResponseHeaders(),以一个字符串形式返回所有的响应头,且每个响应头独占一行。console.log(jqXHR.getAllResponseHeaders());//参数 data 表示服务器的响应体信息。console.log(data);//XMLHttpRequest 对象的属性 responseType,用于表示服务器响应体的数据类型,"" (默认值)表示字符串、text 表示字符串、//arraybuffer 表示 ArrayBuffer 对象、blob 表示 Blob 对象、document 表示 Document 对象(XML/HTML)、json 表示 JSON 对象。console.log(jqXHR.responseType);},//属性 timeout 用于指定当前请求的最大请求时间,单位为毫秒,如果请求在该时间内未结束则会自动终止,同时执行 error 指定的回调。timeout: 2000,//方法 error(jqXHR, textStatus) 用于指定请求失败时的回调,//其中参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展,提供了更多的方法和属性来处理 HTTP 请求;//textStatus 表示请求的状态,对于失败的请求,值通常是"timeout"(请求超时)、"error"(请求未能成功完成)、"abort"(请求被中止)、//"parsererror"(解析返回的数据时出错)等。error: function(jqXHR,textStatus){console.log("请求失败,请稍后重试!");}
})

三、jQuery 发送 POST 请求

$.ajax({type: 'POST',url: 'http://127.0.0.1:8080/saveData',//属性 contentType 用于告诉服务器请求体的数据类型是什么,默认值为 application/x-www-form-urlencoded,//application/json 表示请求体是 JSON 格式的数据,application/x-www-form-urlencoded 表示请求体是表单数据。//contentType: 'application/json; charset=utf-8',//属性 processData 用于指定 data 属性值是否需要自动转换,默认为 true。//processData: false,//属性 data 用于指定发送到服务器的数据,类型可以是 Key/Value 对、JSON 字符串、FromData 对象等,//此时此处 data 属性值将自动转换为表单数据格式并放在请求体中。data: {param1:value1, param2:value2},//JavaScript 内置对象 JSON 的方法stringify(),用于将 JavaScript 对象转换成 JSON 格式的字符串。//data: JSON.stringify({ param1:value1,param2:value2 }),success: function(data,textStatus,jqXHR){//假设响应体为 JSON 格式的字符串,此时我们可以通过 JavaScript 内置对象JSON的方法parse()将其转换成 JavaScript 对象。console.log(JSON.parse(data));},timeout: 2000,error: function(jqXHR,textStatus){console.log("请求失败,请稍后重试!");}
})

四、$.ajax() 方法

1、含义

        $.ajax(url,[settings]) 等同于 jQuery.ajax(url,[settings]),是 jQuery 提供的一个全局函数,用于发送 Ajax 请求。该函数接受一个配置对象作为参数,这个对象可以包含各种属性和方法,用于定义 Ajax 请求的不同方面。

2、settings 选项

① type 属性

含义:用于指定请求类型(GET/POST),默认为 GET。

说明:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

async 属性

含义:用于指定请求方式,true 表示异步请求(默认值),false 表示同步请求。

说明:同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

headers 属性

含义:用于设置请求头,值为一个对象"{键:值}",其中键是请求头的名称、值是请求头的值。

说明:它允许我们向服务器发送额外的 HTTP 请求头,比如认证令牌、客户端类型、内容类型等,从而进行相应的处理。

④ contentType 属性

含义:用于告诉服务器请求体的数据类型是什么,默认值为 application/x-www-form-urlencoded。

说明:application/json 表示请求体是 JSON 格式的数据,application/x-www-form-urlencoded 表示请求体是表单数据。

processData 属性

含义:用于指示 jQuery 是否应该自动将传入的数据(通过 data 配置项指定的)转换为查询字符串(对于 GET 请求)或发送为表单数据(对于 POST 请求),默认值为 true。

说明:当我们向服务器发送原始数据( JSON 数据、FormData 对象、Blob 或 ArrayBuffer 等二进制数据)时,应该将 processData 设置为 false。

⑥ data 属性

含义:用于指定发送到服务器的数据,类型可以是 Key/Value 对、JSON 字符串、FromData 对象等。

说明:数据类型为 Key/Value 对且 Value 为数组时,jQuery 将自动为不同值对应同一个名称,如 {foo:["bar1", "bar2"]} 将转换为 "&foo=bar1&foo=bar2"。

⑦ timeout 属性

含义:用于指定当前请求的最大请求时间,单位为毫秒。

说明:如果请求在该时间内未结束则会自动终止,同时执行 error 指定的回调。

beforeSend(jqXHR) 方法

含义:用于指定请求发送前的回调,若返回 false,则请求将被取消。

说明:它允许我们在请求发送前执行一些操作,比如设置请求头、修改发送的数据、根据某些条件取消请求等;其中参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展,提供了更多的方法和属性来处理 HTTP 请求。

⑨ success(data, textStatus, jqXHR) 方法

含义:用于指定请求成功后的回调。

说明:参数 data 表示服务器的响应体信息;textStatus 表示请求的状态,对于成功的请求,值通常是"success";jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展,提供了更多的方法和属性来处理 HTTP 请求。

⑩ error(jqXHR, textStatus) 方法

含义:用于指定请求失败时的回调。

说明:参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展,提供了更多的方法和属性来处理 HTTP 请求;textStatus 表示请求的状态,对于失败的请求,值通常是"timeout"(请求超时)、"error"(请求未能成功完成)、"abort"(请求被中止)、"parsererror"(解析返回的数据时出错)等。

⑪ complete(jqXHR, textStatus) 方法

含义:用于指定请求完成后(无论成功或失败)的回调。

说明:它允许我们执行一些在请求结束后始终需要执行的代码,比如隐藏加载动画、清理资源等;其中参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展,提供了更多的方法和属性来处理 HTTP 请求;textStatus 表示请求的状态,值通常是"success"(请求成功完成)、"timeout"(请求超时)、"error"(请求未能成功完成)、"abort"(请求被中止)、"parsererror"(解析返回的数据时出错)等。

五、扩展知识

        在早期的 jQuery 版本中,$.ajax() 函数返回其创建的 XMLHttpRequest 对象。然而,自 jQuery 1.5 开始,jQuery 团队在这个 jqXHR 对象的基础上,添加了对 Promise 接口的实现。这意味着,$.ajax() 函数现在返回的 jqXHR 对象同时拥有 XMLHttpRequest 对象的所有属性和方法,以及 Promise 接口提供的一系列新方法。Promise 提供了三个核心方法 .then()、.catch()、.finally(),用于处理异步操作的结果。其中,方法 .then() 用于指定 Promise 成功后或失败时的回调;.catch() 用于指定 Promise 失败时的回调;.finally() 用于指定无论 Promise 最终状态如何都会执行的回调。然而,jQuery 为了提供更符合其使用习惯的 API,在实现 Promise 接口的基础上,额外定义了 .done()、.fail()、.always() 方法。这些方法提供了与 .then()、.catch()、.finally() 类似的功能,但具有更明确的语义,使得代码在处理成功、失败和最终完成时的逻辑更加清晰。

$.ajax({type: 'POST',url: 'http://127.0.0.1:8080/saveData',//属性 contentType 用于告诉服务器请求体的数据类型是什么,默认值为 application/x-www-form-urlencoded,//application/json 表示请求体是 JSON 格式的数据,application/x-www-form-urlencoded 表示请求体是表单数据。contentType: 'application/json; charset=utf-8',//属性 processData 用于指定 data 属性值是否需要自动转换,默认为 true。processData: false,//属性 data 用于指定发送到服务器的数据,类型可以是 Key/Value 对、JSON 字符串、FromData 对象等,//JavaScript 内置对象 JSON 的方法stringify(),用于将 JavaScript 对象转换成 JSON 格式的字符串。data: JSON.stringify({ param1:value1,param2:value2 }),timeout: 2000
})
.done(function(data,textStatus,jqXHR){ //用于指定请求成功后的回调。console.log(data);
})
.fail(function(jqXHR,textStatus){ //用于指定请求失败时的回调。console.log("请求失败,请稍后重试!");
})
.always(function(jqXHR, textStatus){ //用于指定请求完成后(无论成功或失败)的回调。console.log(jqXHR.response);
})

        值得注意的时,虽然 jQuery 的这些方法提供了便利,但在现代的 JavaScript 开发中,直接使用原生的 Promise 接口和 async/await 语法已经成为主流。这些现代 JavaScript 特性提供了更加强大和灵活的异步编程能力,同时保持了代码的简洁性和可读性。因此,对于新的开发项目,建议优先考虑使用原生的 Promise 接口和 async/await 语法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/47841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聊聊常见的分布式ID解决方案

highlight: xcode theme: vuepress 为什么要使用分布式ID? 随着 Web 开发技术的不断发展,单体的系统逐步走向分布式系统。在分布式系统中,使用分布式 ID(Distributed IDs)主要是为了在没有单点故障的情况下生成唯一标识符。这些唯一标识符在很…

C++【OpenCV】图片亮度色度归一化

#include <opencv2/highgui.hpp> #include <opencv2/imgproc.hpp> #include <iostream>using namespace cv; using namespace std;int main() {Mat image imread("SrcMF.jpg");// 灰度、Gamma归一化亮度cv::Mat m_gray;cv::cvtColor(image, m_gra…

Linux-CentOS7忘记密码找回步骤

虚拟机版本 一、进入开机页面&#xff0c;先按上下&#xff08;↑↓&#xff09;键&#xff0c;以免系统自动启动。 二、按“e”键进入编辑页面,找到如下图位置&#xff0c;输入&#xff1a;init/bin/sh 按CTRLX 进入单用户模式。 三、 输入 mount -o remount,rw / 然后按 ent…

为什么局部内部类和匿名内部类只能访问局部final变量?

简述final final修饰的类表示不可被继承&#xff0c;修饰方法表示此方法不可以被子类覆盖&#xff0c;但是可以被重载&#xff0c;修饰变量表示变量一旦被赋值就不可以更改它的值&#xff08;基础类型是值&#xff0c;引用类型是地址&#xff09; 修饰成员变量 a. 如果final修…

【ARMv8/v9 GIC- 700 系列 2 -- GIC-700 上电控制寄存器 GICR_PWRR】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 GIC-700 上电GICR_PWRR 寄存器字段介绍GICR_PWRR 功能说明GICR_PWER 代码配置GICR_PWRR 使用场景GICR_PWRR 注意事项GIC-700 上电 GICR_PWRR(功耗寄存器)是ARM GICv4架构中用于控制GIC-700是否可以关闭电源的寄存器。它通过几个位…

sql server插入数据或查询慢如何诊断?

SQL Server插入数据慢的原因可能有多种&#xff0c;具体原因需要根据实际情况进行分析。以下是一些常见的原因及解决办法&#xff1a; 1. 索引问题 大量索引&#xff1a;在插入数据时&#xff0c;SQL Server需要更新所有相关的索引&#xff0c;这会增加插入操作的开销。 解决…

git-常用基础指令

一、基本指令 1. 配置用户名和邮箱 git config --global user.name "Your Name" git config --global user.email "your.emailexample.com"2. 初始化仓库 git init3. 克隆仓库 git clone <repository_url>4. 查看当前状态 git status5. 添加文件…

iPython与Matplotlib:数据可视化的秘籍

iPython与Matplotlib&#xff1a;数据可视化的秘籍 前言 欢迎来到"iPython与Matplotlib&#xff1a;数据可视化的秘籍"教程&#xff01;无论你是数据可视化新手还是希望提升技能的专业人士&#xff0c;这里都是你开始的地方。让我们开始这段数据可视化之旅吧&#…

C++:opencv将彩色图转换为灰度图

在C中&#xff0c;使用OpenCV库将彩色图转换成灰度图是一个相对直接的过程。你可以使用cv::cvtColor()函数&#xff0c;该函数可以将图像从一个颜色空间转换到另一个颜色空间。对于将彩色图转换为灰度图&#xff0c;你通常会从BGR颜色空间&#xff08;OpenCV中默认的彩色图像格…

Go语言并发编程-Goroutine调度

goroutine 概念 在Go中&#xff0c;每个并发执行的单元称为goroutine。通常称为Go协程。 go 关键字启动goroutine go中使用关键字 go 即可启动新的goroutine。 示例代码&#xff1a; 两个函数分别输出奇数和偶数。采用常规调用顺序执行&#xff0c;和采用go并发调用&…

Go 1.19: 性能提升与新特性

Go语言&#xff0c;以其简洁、高效和并发支持而广受欢迎。随着Go 1.19版本的发布&#xff0c;Go语言再次为开发者带来了一系列新特性和改进。本文将介绍Go 1.19的主要变化、新特性以及如何开始使用这个新版本。 Go 1.19 简介 Go 1.19是Go语言的一次重大更新&#xff0c;它在性…

OpenCV教程:cv2如何把两张图片的大小,设置成相同的宽高

-------------OpenCV教程集合------------- Python教程99&#xff1a;一起来初识OpenCV&#xff08;一个跨平台的计算机视觉库&#xff09; OpenCV教程01&#xff1a;图像的操作&#xff08;读取显示保存属性获取和修改像素值&#xff09; OpenCV教程02&#xff1a;图像处理…

前端开发实际项目中常见的实用技巧

CSS filter .logo1 {/* 设置阴影 */filter: drop-shadow(1px 1px 10px #333); } .title {/* 设置模糊度,值越大,越模糊*/filter: blur(1px); } .logo2 {/* 设置对比度,值越大,对比度越大 */filter: contrast(10); } .logo3 {/* 设置制灰程度,常用于一些特殊日子 */filter…

什么是虚拟DOM?什么是diff算法?

虚拟DOM&#xff08;Virtual DOM&#xff09;是一种用JavaScript对象表示的虚拟的页面DOM结构。它是对实际的DOM对象的抽象&#xff0c;可以在内存中进行操作和计算&#xff0c;而不需要直接操作真实的DOM。当数据发生变化时&#xff0c;虚拟DOM会进行一次全量比较和更新&#…

【html】html的基础知识(面试重点)

一、如何理解HTML语义化 1、思考 A、在没有任何样式的前提下&#xff0c;将代码在浏览器打开&#xff0c;也能够结构清晰的展示出来。标题是标题、段落是段落、列表是列表。 B、便于搜索引擎优化。 2、参考答案 A、让人更容易读懂&#xff08;增加代码可读性&#xff09;。 B、…

如何用EXCEL自动解方程/方程组?利用 矩阵乘法X=A-*B,X=mmult(minverse(A), B)

目录 问题的由来 1 数据 → 模拟分析 → 单变量求解 1.1 找一个单元格填入公式 1.2 功能入口 1.3 选择单变量求解&#xff0c;分别填入内容 1.4 求解 1.5 这个感觉用处不大 2 重点介绍&#xff0c;用EXCEL进行矩阵运算解方程的操作 2.1 运用EXCEL进行矩阵运算&…

Mac 安装MySQL 配置环境变量 修改密码

文章目录 1 下载与安装2 配置环境变量3 数据库常用命令3.1 Mac使用设置管理mysql服务启停 4 数据库修改root密码4.1 知道当前密码4.2 忘记当前密码4.3 问题 参考 1 下载与安装 官网&#xff1a;https://www.mysql.com/ 找到开源下载方式 下载社区版 2 配置环境变量 对于Mac…

Ubuntu16.04环境下Baxter机器人开发环境搭建要点说明

Ubuntu16.04环境下Baxter机器人开发环境搭建要点说明 前面写过一篇文章&#xff0c;描述了在ubuntu20.04环境下baxter机器人开发环境的搭建&#xff0c;本人在后来的使用中&#xff0c;出于一些原因又在ubuntu16环境下搭建了开发环境&#xff0c;二者总体流程基本类似&#xf…

TikTok内嵌跨境商城全开源_搭建教程/前端uniapp+后端源码

多语言跨境电商外贸商城 TikTok内嵌商城&#xff0c;商家入驻一键铺货一键提货 全开源完美运营&#xff0c;接在tiktok里面的商城内嵌&#xff0c;也可单独分开出来当独立站运营 二十一种语言&#xff0c;可以做很多国家的市场&#xff0c;支持商家入驻&#xff0c;多店铺等等…

大数据之数据抽取架构演变过程

架构演变之Flink架构的演变过程 一、 起初搭建整个大数据平台是基于CDH这一套资源管理和整合的CM资源管理器搭建的 整个平台包括了&#xff1a; HDFS&#xff0c;YARN&#xff0c;HIVE&#xff0c;zoozie,FLINK,Spark,Zookeeper等组件搭建而成&#xff0c; 刚开始搭建的时候&am…