文档章节

JavaScript中发出HTTP请求最常用的方法

p
 peakedness丶
发布于 01/10 19:37
字数 1244
阅读 85
收藏 1

JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。在本文中,我们将介绍一些在JavaScript中发出HTTP请求的流行方法。

Ajax

Ajax是发出异步HTTP请求的传统方式。可以使用HTTP POST方法发送数据,并使用HTTP GET方法接收数据。我们来看看发送GET请求。我将使用JSONPlaceholder,这是一个免费的在线REST API,适用于以JSON格式返回随机数据的开发人员。 要在Ajax中进行HTTP调用,您需要初始化一个新XMLHttpRequest()方法,指定URL端点和HTTP方法(在本例中为GET)。最后,我们使用该open()方法将HTTP方法和URL端点绑定在一起,并调用该send()方法来触发请求。 我们使用XMLHTTPRequest.onreadystatechange包含要在readystatechanged事件触发时调用的事件处理程序的属性将HTTP响应记录到控制台。

如果您查看浏览器控制台,它将返回JSON格式的数据数组。但是我们怎么知道请求是否完成了?换句话说,我们如何使用Ajax处理响应? 该onreadystatechange有两个方法,readyState 和 status允许我们可以检查请求的状态。

如果readyState等于4,则表示请求已完成。 除了使用JavaScript直接进行Ajax调用之外,还有其他更强大的HTTP调用方法,例如$.AjaxjQuery方法。

jQuery方法 jQuery有很多方法可以轻松处理HTTP请求。要使用这些方法,您需要在项目中包含jQuery库。

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

$.ajax

jQuery Ajax是进行HTTP调用的最简单方法之一。

$ .ajax方法需要许多参数,其中一些是必需的,另一些是可选的。它包含两个回调选项success并error处理收到的响应。

$.get方法

$.get方法用于执行GET请求。它需要两个参数:请求地址和回调函数。

$.post

该$.post方法是将数据发布到服务器的另一种方法。它需要三个参数:请求的url地址您要发送的数据和回调函数。

$.getJson

该$.getJSON方法仅检索JSON格式的数据。它需要两个参数:url和回调函数。

jQuery具有所有这些方法来请求或将数据发布到远程服务器。但实际上你可以将所有这些方法合而为一:$.ajax方法,如下例所示:

Fetch

fetch是一个新的功能强大的Web API,可以让您发出异步请求。事实上,这fetch是制作HTTP请求的最佳和最喜欢的方式之一。它返回一个“Promise”,这是ES6的一大特色。 如果你不熟悉ES6,你可以阅读一下关于ES6的文章。Promise允许我们以更智能的方式处理异步请求。我们来看看fetch技术如何运作。

该fetch函数需要一个必需参数:endpointURL。它还有其他可选参数,如下例所示:

如您所见,fetch制作HTTP请求有许多优点。此外,在fetch中还有其他模块和插件,允许我们向服务器端发送和从服务器端接收请求,例如Axios.

Axios

Axios是一个用于发出HTTP请求的开源库,并提供许多强大的功能。我们来看看它是如何工作的。

用法: 首先,您需要包含Axios。有两种方法可以在项目中包含Axios。 首先,你可以使用npm: npm install axios --save

然后你需要导入它 import axios from 'axios'

使用axios发出请求: 使用Axios,您可以使用GET和POST从服务器检索和发布数据。

image

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

axios采用一个必需参数,也可以采用第二个可选参数。这将一些数据作为简单查询。

POST:

Axios返回“Promise”。如果您熟悉promises,您可能知道promise可以执行多个请求。您可以使用axios执行相同的操作并同时运行多个请求。

Axios支持许多其他方法和选项。你可以官网了解他们

© 著作权归作者所有

p
粉丝 58
博文 142
码字总数 204859
作品 0
长沙
私信 提问
python_day21_Django-5 (ajax)

1、AJAX简介   AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是...

812374156
2018/08/04
0
0
Ajax学习(1)---Ajax 入门简介

学习目的:理解 Ajax 及其工作原理,构建网站的一种有效方法. Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术: • HTML 用于建立 ...

华山猛男
2014/03/27
38
0
使用 node.js 进行服务器端 JavaScript 编程

简介: node.js 是一个可以使用 JavaScript 开发服务器端应用的平台。它依托于 Google V8 JavaScript 引擎,并采用事件 I/O 的架构,可以用来创建高性能服务器。本文详细介绍了 node.js 的基...

IBMdW
2011/07/22
1K
2
最大限度利用 JavaScript 和 Ajax 性能

简介 在 web 早期,优化 web 页面的性能通常意味着避免了使用不必要的 HTML 标记,将 JavaScript 代码量控制到最小,并尽量减小所有图片文件大小,否则上网冲浪者会走开去泡杯咖啡来等待页面...

IBMdW
2011/08/08
3K
3
Node.js简单介绍并实现一个简单的Web MVC框架

本文为原创文章,出自http://cnodejs.org,转载请注明出处和作者 作者:QLeelulu 原文:http://cnodejs.org/blog/?p=342 Node.js是什么 Node让你可以用javascript编写服务器端程序,让javas...

红薯
2011/03/20
17.4K
12

没有更多内容

加载失败,请刷新页面

加载更多

从0搭建自己的webpack开发环境(五)

往期回顾: 从0搭建自己的webpack开发环境(一) 从0搭建自己的webpack开发环境(二) 从0搭建自己的webpack开发环境(三) 从0搭建自己的webpack开发环境(四) 前四篇文章我们已经掌握了w...

前端优选
昨天
5
0
docker 构建php-fpm 7.2(swoole) 镜像

mkdir -p ~/mnt/docker/phpmkdir -p ~/mnt/docker/php#下载swoole-2.2.0.tgz安装包到software 下载地址:http://pecl.php.net/package/swoole/2.2.0#创建Dockerfilevim ~/docker/......

Jack088
昨天
5
0
简单工厂

定义:由一个工厂对象决定创建出哪一种产品类的实例 类型:创建型,但不属于GOF23种设计模式 工厂类负责创建的对象比较少 客户端(应用层)只知道传入工厂类的参数,对于如何创建对象,不关心...

东风破2019
昨天
4
0
SSH安全加强两步走

从 OpenSSH 6.2 开始已经支持 SSH 多因素认证,本文就来讲讲如何在 OpenSSH 下启用该特性。 OpenSSH 6.2 以后的版本多了一个配置项 AuthenticationMethods。该配置项可以让 OpenSSH 同时指定...

Linux就该这么学
昨天
7
0
聊聊nacos的TcpSuperSenseProcessor

序 本文主要研究一下nacos的TcpSuperSenseProcessor TcpSuperSenseProcessor nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/healthcheck/TcpSuperSenseProcessor.java @Compon......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部