Ajax - freeCodeCamp.org

写给初学者的编程教程：ajax 是什么以及 ajax 如何使用

luojiyin — Sat, 23 Apr 2022 06:19:00 +0000

原文：AJAX Tutorial: What AJAX Is and How to Use it

什么是 AJAX

AJAX 是 Asynchronous JavaScript And XML 的缩写。它不是一种编程语言。它是一种基于 HTML、CSS、JavaScript 和 XML，让开发更好、更快和更有互动的 Web 应用的技术。

HTML：超文本标记语言（HTML）用于定义网络应用程序的结构。
CSS：层叠样式表（CSS）用于为 Web 应用程序提供外观和样式。
JavaScript：JavaScript 用于使网络应用程序互动、提供趣味和提高用户友好性。
XML：可扩展标记语言（XML）是一种用于存储和传输网络服务器数据的格式。

AJAX 中的异步是什么意思

异步意味着网络应用程序可以从网络服务器发送和接收数据，而无需刷新页面。这个向服务器发送数据和接收服务器数据以及更新网页不同部分的后台过程，就是 AJAX 的异步属性/功能。

AJAX 是如何工作的

AJAX 利用浏览器内置的 XMLHttpRequest 对象 从网络服务器请求数据，并利用 HTML DOM 显示或使用数据。

XMLHttpRequest 对象：它是一个对象形式的 API，其方法用于网络浏览器和网络服务器之间传输数据。

HTML DOM：当一个网页被加载时，浏览器会创建一个页面的文档对象模型。

创建一个 XMLHttpRequest 对象：

var xhttp = new XMLHttpRequest();

XMLHttpRequest 对象的属性：

readystate 是 XMLHttpRequest 对象的一个属性，它是 XMLHttpRequest 的一种状态值。

0：请求未被初始化
1：服务器连接建立
2：收到请求
3：处理请求
4：请求完成，响应准备就绪

onreadystatechange是 XMLHttpRequest 对象的一个属性，它定义了一个当 readyState 属性改变时要调用的函数。

status 是 XMLHttpRequest 对象的一个属性，用于返回一个请求的状态值。

200："OK"
403："Forbidden"
404："Not Found"

XMLHttpRequest对象方法： 为了向 Web 服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

xhttp.open('GET', 'content.txt', true);
xhttp.send();

使用 JavaScript 创建一个函数 changeContent()：

function changeContent() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById('foo').innerHTML = this.responseText;
        }
    };
    xhttp.open('GET', 'content.txt', true);
    xhttp.send();
}

改变网页内容的 AJAX 实例：



    
        
            The XMLHttpRequest Object

文件 content.txt 应该存在于Web应用程序的根目录中。

用 JavaScript 发起 HTTP 请求的几种方法

arronKler — Tue, 23 Mar 2021 09:35:00 +0000

JavaScript 具有非常棒的模块和方法，可以用来建立可从服务器端资源发送或接收数据的 HTTP 请求。本文会带着大家一起看看在 JavaScript 中常用的建立 HTTP 请求的方式有哪些。

Ajax

Ajax 是最常规的建立异步 HTTP 请求的方式。你可以使用 HTTP POST 方法来发送数据，以及使用 HTTP GET 来接收数据。我们先来看看如何发起一个 GET 请求。这里我会用到一个免费在线的 REST API 工具 JSONPlaceholder，它可以用来给开发者返回随机的 JSON 格式数据。

要在 Ajax 中发起一个 HTTP 调用，你需要初始化一个新的 XMLHttpRequest() 方法，指定 URL 端点和 HTTP 方法（在本例中为 GET）。最后，使用 open() 方法将两者结合起来，并调用 send() 方法执行请求。

我们可以在 XMLHTTPRequest.onreadystatechange 的事件监听器中输出 HTTP 请求结果日志到控制台中，这个事件监听器会在 readystatechanged 事件发生的时候触发。

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

如果你查看浏览器的控制台，上面的代码会返回一组 JSON 格式的数组数据。但是我们怎么知道请求已经完成了呢？换句话说，我们应该怎样处理 Ajax 的响应数据呢？

onreadystatechange 有两个方式可以让我们可以检测到当前请求的状态， readyState 和 status。

如果 readyState 等于 4，意味着请求已经完成了。readyState 这个属性可以有 5 种状态值。你可以点击这里了解更多。

除了直接通过 JavaScript 创建 Ajax 调用，还有其他的非常有效的创建 HTTP 调用的方法，比如 jQuery 中的方法 $.Ajax。现在我们就来讨论这些方法。

jQuery 方法

jQuery 有很多可以轻松处理 HTTP 请求的方法。为了能使用到这些方法，你需要在你的项目中引入 jQuery 库。

$.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，可以看看这篇文章了解一下。Promise 可以让我们用一种更聪明的方式处理异步请求。让我们来看一下 fetch 从技术上来说是如何工作的。

fetch 函数接收一个必要参数：端点 URL。在下面的示例中它也有其它的可选参数：

如你所见，fetch 在创建 HTTP 请求方面有很多优势。你可以从这里了解更多。另外，在 fetch 之上也有一些其他的模块和插件可以让我们给服务端发送请求或者从服务端接收请求，比如axios

Axios

Axios 是一个开源的创建 HTTP 请求的库，它提供了许多好用的特性，让我们来看一看它是如何用的吧。

Usage:

首先，你需要引入 Axios。这里有两种方式将 Axios 引入你的项目。

第一种，你可以使用 npm 进行安装:

npm install axios --save

然后你需要引入它:

import axios from 'axios'

第二种，你可以使用 CDN 来引入 axios：

使用 axios 创建请求:

基于 Axios，你可以使用 GET 和 POST 来向服务端请求数据和发送数据。

GET:

axios 需要一个必填参数，当然你也可以提供第二个可选参数。这个示例调用一些数据作简单的查询。

POST:

Axios 返回一个 “Promise”。如果你对 Promise 比较熟悉的话，你应该知道用 Promise 可以用来执行并行请求。这里你就可以用 axios 在同一时间运行多个并行请求。

Axios 还提供了一些其他的方法和选项，你可以在这里具体看看。

Angular HttpClient

Angular 有它自己的和 Angular 应用一起运行的 HTTP 模块。它使用到了 RxJS 库来处理异步请求，同时还提供了许多用来执行 HTTP 请求的选择。

使用 Angular HttpClient 来发起一个服务端调用

为了能使用 Angular HttpClient 来发起一个请求，我们需要将代码运行在一个 Angular 应用中。所以我这里就创建了一个。如果你对 Angular 不是很熟悉的话，可以看一下我的文章 20分钟内学会如何创建你的第一个 Angular 应用。

我们需要做的第一件事儿是在 app.module.ts 中引入 HttpClientModule 模块。

然后，我们需要创建一个服务来处理请求。你可以使用 Angular CLI 很容易的创建一个服务。

ng g service  FetchdataService

再然后，我们需要在 fetchdataService.ts 服务中的引入 HttpClient 并且将其注入到构造器中。

在 app.component.ts 文件中引入 fetchdataService。

//import
import { FetchdataService } from './fetchdata.service';

最后，调用这个服务并运行。

app.component.ts:

你可以在 Stackblitz 上看到这整个示例。

总结

我们刚刚了解了在 JavaScript 中最常用的创建 HTTP 请求的几种方式。

感谢你的阅读。如果你喜欢的话，点击 "关注"，然后可以在 Twitter 上找到我。

顺便说一下，我最近与一群强大的软件工程师一起为我的一个移动应用程序工作。该组织非常出色，产品交付速度非常快，比我所合作的其他公司和自由职业者要快得多，我认为我可以诚实地推荐他们用于其他项目。如果您想与我联系，请给我发送电子邮件。

原文：Here are the most popular ways to make an HTTP request in JavaScript，作者：Said Hayani

JQuery Ajax POST 方法

freeCodeCamp.org — Wed, 20 Jan 2021 09:20:00 +0000

发送异步 http POST 请求以从服务器加载数据，其一般形式为：

jQuery.post( url [, data ] [, success ] [, dataType ] )

url：是唯一的必需参数。此字符串包含向其发送请求的地址。如果未指定其他参数，则返回的数据将被忽略。
data：与请求一起发送到服务器的对象或字符串。
success：如果请求成功，将执行这个回调函数。它将返回的数据作为参数，它还传递了响应的文本状态。
dataType：服务器期望的数据类型，默认值为 Intelligent Guess（xml、json、脚本、文本、html）。如果提供了此参数，则还必须提供 success 回调。

示例

$.post('http://example.com/form.php', {category:'client', type:'premium'});

从服务器请求 form.php，发送其他数据并忽略返回的结果。

$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){ 
      alert("success");
      $("#mypar").html(response.amount);
});

从服务器请求 form.php，发送其他数据并处理返回的响应（json 格式）。该示例可以用以下格式编写：

$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
      alert("success");
      $("#mypar").html(response.amount);
});

以下示例使用 Ajax 发布表单并将结果放入 div 中：




  
  jQuery.post demo

以下示例使用 GitHub API，通过使用 jQuery.ajax() 获取用户的仓库列表，并将结果放入 div 中：




  
  jQuery Get demo

jQuery.ajax()

$.post( url [, data ] [, success ] [, dataType ] ) 是一个简写的 Ajax 函数，等同于：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.ajax() 还有更多选项，可点击这里查看。