JS-37-jQuery06-ajax

embedded/2024/11/14 21:56:33/

用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很麻烦。

用JavaScript写AJAX

用jQuery的相关对象来处理AJAX,不但不需要考虑浏览器问题,代码也能大大简化。

一、ajax()函数

jQuery在全局对象jQuery(也就是$)绑定了ajax()函数,可以处理AJAX请求。

ajax(url, settings)函数需要接收一个URL和一个可选的settings对象。

settings对象常用的选项如下:

  • async:是否异步执行AJAX请求,默认为true,千万不要指定为false

  • method:发送的Method,缺省为'GET',可指定为'POST''PUT'等;

  • contentType:发送POST请求的格式,默认值为'application/x-www-form-urlencoded; charset=UTF-8',也可以指定为text/plainapplication/json

  • data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType把data序列化成合适的格式;

  • headers:发送的额外的HTTP头,必须是一个object;

  • dataType:接收的数据格式,可以指定为'html''xml''json''text'等,缺省情况下根据响应的Content-Type猜测。

下面的例子发送一个GET请求,并返回一个JSON格式的数据:

javascript">var jqxhr = $.ajax('/api/categories', {dataType: 'json'
});
// 请求已经发送了

 

不过,如何用回调函数处理返回的数据和出错时的响应呢?

还记得Promise对象吗?

jQuery的jqXHR对象类似一个Promise对象,我们可以用链式写法来处理各种回调:

javascript">function ajaxLog(s) {var txt = $('#test-response-text');txt.val(txt.val() + '\n' + s);
}$('#test-response-text').val('');var jqxhr = $.ajax('/api/categories', {dataType: 'json'
}).done(function (data) {ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {ajaxLog('请求完成: 无论成功或失败都会调用');
});

或者:

javascript">$.ajax({  url: 'http://example.com/data', // 跨域的 URL  dataType: 'json', // 告诉 jQuery 期望返回的是 JSONP 格式的数据  success: function(data) {  console.log(data); // 打印返回的数据  },  error: function(jqXHR, textStatus, errorThrown) {  console.log('Error: ' + textStatus, errorThrown);  }  
});

二、get()函数 

对常用的AJAX操作,jQuery提供了一些辅助方法。

由于GET请求最常见,所以jQuery提供了get()方法,可以这么写:

javascript">var jqxhr = $.get('/path/to/resource', {name: 'Bob Lee',check: 1
});

第二个参数如果是object,jQuery自动把它变成query string然后加到URL后面,实际的URL是:

/path/to/resource?name=Bob%20Lee&check=1

这样我们就不用关心如何用URL编码并构造一个query string了。

三、post()函数

post()get()类似,但是传入的第二个参数默认被序列化为application/x-www-form-urlencoded

javascript">var jqxhr = $.post('/path/to/resource', {name: 'Bob Lee',check: 1
});

实际构造的数据name=Bob%20Lee&check=1作为POST的body被发送。

当使用 $.post 发送请求时,你可以通过回调函数来处理服务器的响应。

这个回调函数通常有两个参数:服务器返回的数据和状态文本(通常是 "success", "error", "abort", 或 "timeout")。

四、getJSON()函数

由于JSON用得越来越普遍,所以jQuery也提供了getJSON()方法来快速通过GET获取一个JSON对象:

javascript">var jqxhr = $.getJSON('/path/to/resource', {name: 'Bob Lee',check: 1
}).done(function (data) {// data已经被解析为JSON对象了
});

五、安全限制

jQuery的AJAX完全封装的是JavaScript的AJAX操作,所以它的安全限制和前面讲的用JavaScript写AJAX完全一样。

如果需要使用JSONP,可以在ajax()中设置jsonp: 'callback',让jQuery实现JSONP跨域加载数据。


http://www.ppmy.cn/embedded/10712.html

相关文章

vscode vue template模板中 tab键无法快速补全

之前记得一直可以的突然不知道咋的就不行了… 解决办法: 菜单栏 - 文件 - 首选项 - 设置- emmet:tab ✔就好了

一个文生视频MoneyPrinterTurbo项目解析

最近抖音剪映发布了图文生成视频功能,同时百家号也有这个功能,这个可以看做是一个开源的实现,一起看看它的原理吧~ 一句话提示词 大模型生成文案 百家号生成视频效果 MoneyPrinterTurbo生成视频效果 天空为什么是蓝色的? 天空…

GPT-Engineer:一个基于OpenAI的GPT-4模型的开源项目,旨在自动化软件工程任务,如代码生成、需求澄清和规范生成

GPT-Engineer是一个基于OpenAI的GPT-4模型的开源项目,旨在自动化软件工程任务,如代码生成、需求澄清和规范生成等38。它通过与GPT-4模型以对话方式交互,根据提供的提示或指令自动生成代码库或完成特定的软件开发任务256。这个工具特别适合于快速原型设计和开发复杂应用程序,…

web server apache tomcat11-10-Class Loader

前言 整理这个官方翻译的系列,原因是网上大部分的 tomcat 版本比较旧,此版本为 v11 最新的版本。 开源项目 从零手写实现 tomcat minicat 别称【嗅虎】心有猛虎,轻嗅蔷薇。 系列文章 web server apache tomcat11-01-官方文档入门介绍 web…

【再探】设计模式-设计原则

设计原则是在编写程序时引导程序员遵循的一些原则和准则。这些原则旨在提高代码的可读性、可维护性、可扩展性和可重用性。 可读性:理解和沟通的难易程度。可维护性:修改和调整的难易程度。可扩展性:应对未来变化的能力。可重用性&#xff1…

Oracle EBS Interface/API(54)- GL日记账审批

背景: 客户化创建薪酬凭证或者银企付款入账日记账以后,用户希望自动提交审批流程,无需到系统标准功能点击审批,减少用户操作。 快速参考 参考点内容功能导航N: GL->日记账->输入并发请求None基表GL.GL_JE_BATCHESAPI参考下面介绍错误信息表None接口FormNone接口Reque…

LLM使用方法介绍,持续更新

LLM使用方法介绍,持续更新 1. LLM本地搭建与运行 1. Ollama的安装 网址:https://ollama.com/点击Download选择对应的操作系统下载安装软件,软件默认安装在C盘无法选择路径; 安装完成后,WinR进入终端执行&#xff1a…

Qt 跨平台开发的一丢丢总结

Qt 跨平台开发 文章目录 Qt 跨平台开发摘要第一 \ & /第二 神奇{不能换行显示第三 预处理宏 关键字: Qt、 win、 linux、 lib、 MSVC 摘要 最近一直在琢磨Qt跨平台开发的问题,缘由有以下几个, 首先第一个,我们目前开发…