创建JavaScript AJAX 发布请求：使用和不使用jQuery

在本文中，我们将了解 ajax 是什么，为什么它很重要，以及我们如何post使用 XHR、.fetch()和 jquery 发出 AJAX 请求。

什么是 AJAX？

AJAX 代表异步 javascript 和 XML。AJAX 是一种 Web 开发技术，用于更新网站上的内容，而无需重新加载整个页面。

在 AJAX 应用程序中，JavaScript 用于在用户与其交互时对页面的某些部分进行实时更新，从而将原本静态的 html 页面变成动态页面。

Facebook 和 Twitter 等社交网络 Web 应用程序使用 AJAX 来更新用户提要和通知。

让我们以 Twitter 网络应用程序为例。在指定的时间间隔后，Twitter 应用程序向服务器发出 AJAX 请求以请求新信息。这就是用户无需重新加载页面即可在其提要上接收最新推文的方式。

所有这些都是异步发生的；用户可以在后台从 Web 服务器请求信息时继续使用该应用程序。这正是用户可以滚动浏览他们的提要并对推文做出反应的原因，同时提要使用新推文进行更新。

在传统的客户端-服务器请求中，用户必须重新加载页面才能从服务器获取任何新信息。

AJAX 的好处

AJAX 使用客户端 javaScript 在后台获取和显示内容。这种技术极大地改善了用户体验，因为每次需要新内容时都不必重新加载页面。

使用 AJAX 可以加快页面渲染速度，因为它可以用于仅更新页面中需要更改的部分，而不是重新加载整个页面。

这也降低了对 Web 服务器的请求频率，从而加快了响应时间。

什么是 POST 请求？

从浏览器执行 api 请求时，您将用于数据传输的两种 HTTP 方法是 GET 和 POST。这两种方法的主要区别在于将数据发送到 Web 服务器应用程序的方式。

HTTP GET 以名称和值对的形式将数据传递给服务器应用程序。这些请求参数附加到 URL。例如，以下是 GET 请求的 URL，其中包含将发送到服务器的两个请求参数：

www.mysite.com/id=12&name="chris"

由于数据在 URL 中是可见的，GET因此绝不应该使用该方法来传输敏感信息，例如密码和 *** 详细信息。

相反，该POST方法应始终用于传输敏感数据。该POST方法在请求正文中传输数据。数据可以 JSON 和 XML 格式传输。

如何使用 XHR 发出 AJAX POST 请求

您可以使用XMLHttpRequest对象 (XHR) 通过 AJAX 技术与 Web 服务器进行通信。这是执行 AJAX 的经典方式，但现在现代浏览器支持 Fetch API，这并不是最好的方式。在下一节中，我将向您展示使用fetch().

现在假设我们要将以下数据（博客文章）发布到 Web 服务器：

/* data which will be sent to server */
let postObj = { 
    id: 1, 
    title: "What is AJAX", 
    body: "AJAX stands for Asynchronous JavaScript..."
}

我们可以使用 XHR 将数据发布到 Web 服务器，如下所示：

let post = JSON.stringify(postObj)

const url = "https://jsonplaceholder.typicode.com/posts"
let xhr = new XMLHttpRequest()

xhr.open('POST', url, true)
xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
xhr.send(post);

xhr.onload = function () {
    if(xhr.status === 201) {
        console.log("Post successfully created!") 
    }
}

我们首先将对象转换为要通过 HTTP 传输的 JSON 字符串。然后我们从类中创建了一个xhr对象。XMLHttpRequest

之后，我们通过调用该open()方法打开请求，传入以下选项：

• 'POST'：请求方法；我们正在将数据发布到服务器

• url：这是我们将资源发布到的服务器的 URL

• true: 告诉浏览器异步运行代码

我们继续设置请求标头，告诉服务器如何处理我们发送过来的数据。然后我们发送了请求的正文。

当请求成功完成时，该onload函数将被调用。在此函数中，我们在if将消息记录到控制台之前进行了检查以确保在服务器上成功创建资源（如 201 状态所示）。

您还可以直接从页面中的表单访问值，如下所示：

let postObj = { 
    id: Math.random(), 
    title: document.queryselector('#post-title').value, 
    body: document.querySelector('#post-body').value
}

// [...]

xhr.onload = function () {
    if(xhr.status === 201) {
        let AlertDiv = document.querySelector('#alert')
        AlertDiv.innerHTML =  xhr.response.message
    }
}

在这里，我们直接从 UI 中获取值，并在资源创建成功时向用户显示响应消息。

如何使用 AJAX POST 请求fetch()

在 JavaScript 中进行 AJAX 调用的另一种方法是使用fetch()方法。fetch()是一种内置于 Web 浏览器环境中的 API 实用方法。它是比 更新的 API XMLHttpRequest，具有现代特性使其更易于使用。我建议您使用fetch()AJAX。

以下代码使用以下代码向服务器发出 POST 请求fetch()：

fetch("https://jsonplaceholder.typicode.com/posts", {
    method: 'post',
    body: post,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
}).then((response) => {
    return response.json()
}).then((res) => {
    if (res.status === 201) {
        console.log("Post successfully created!")
    }
}).catch((error) => {
    console.log(error)
})

fetch()接受服务器 URL 和一个包含HTTP方法、请求正文和请求标头等选项的对象。Accept表示客户端可以接受来自服务器的什么样的响应。Content-Type表示当前请求或响应的数据格式。由于我们的请求有一个有效载荷，我们必须使用一个内容类型的请求头。

当请求在服务器上成功执行时，我们将链接then()和catch()方法分别处理服务器响应和错误。

第then()一种方法只是将响应数据转换为 JavaScript 对象并返回该对象。在以下then()方法中，我们检查状态并将成功消息记录到控制台。

如果沿链遇到任何错误，将由catch().

如何使用 jQuery 发出 AJAX POST 请求

到目前为止，我们只使用浏览器 Web API 来执行 AJAX 请求。

我们还可以使用像 jQuery 这样的库来执行 AJAX 请求。jQuery 中的 POST 请求是使用该post()函数执行的。

我将向您展示如何使用 jQuery 来执行 AJAX 请求，但老实说，使用新的 JavaScript Fetch API，真的不需要为 AJAX 导入像 jQuery 这样的整个库。

现在让我们POST使用 jQuery 来发出请求：

$.post("https://jsonplaceholder.typicode.com/posts", 
{
    id: 1, 
    title: "What is AJAX", 
    body: "AJAX stands for Asynchronous JavaScript..."
},
function(data, status) {
    if(status === "success") {
        console.log("Post successfully created!")
    }
},
"json")

post()接受四个参数：URL、请求正文、回调函数和数据格式。

当请求成功完成时，将post()调用传递给的回调函数。此函数从发布请求中获取响应和状态，两者都作为参数。

在回调函数中，我们检查请求状态并将消息记录到控制台。

结论

AJAX 是一种现代 Web 技术，用于异步更新页面内容。这意味着当应用程序使用 JavaScript 从服务器获取信息并更新页面时，用户仍然可以与页面交互。

在本文中，我们研究了在 Web 应用程序中发出 AJAX 发布请求的三种方法。我们使用了XMLHttpRequest对象、fetch 方法和 jQuery。

因为fetch()使用了像 Promise 这样的现代 JavaScript 特性，所以我强烈建议使用它而不是其他选项。这是因为您可以学习和使用诸如then()、catch()和之类的 Promise 结构async/await。

有了 和 等原生 API 的可用性fetch()，XMLHttpRequest就无需导入像 jQuery 这样的整个库来在您的应用程序中发出 AJAX 请求。