如何创建自己的 Ajax 功能？

在本文中，我们将讨论如何创建自己的 ajax 功能。但在开始创建功能之前，我们将讨论ajax。

阿贾克斯： Ajax 代表异步 JavaScript 和 XML。它用于在不重新加载网页的情况下与服务器通信，因此有助于更好的用户体验。因此，如果我们想在不重新加载整个网页的情况下对网页的任何部分进行任何更改，那么我们可以使用 阿贾克斯电话。

Ajax 工作：我们知道请求可以是同步的也可以是异步的。在同步请求的情况下，我们等待时间请求完成，以便执行下一个请求。

但是在异步请求的情况下，我们并没有等待请求被解析，而是为了执行下一个任务。我们执行下一个任务。 Ajax 是异步工作的。在后台，它通过与服务器通信来更新我们的网页，而无需重新加载整个网页。

我们可以借助以下语法创建一个 Ajax 对象：

句法：

var req = new XMLHttpRequest();

我们对 Ajax 对象使用了两种方法：

• open()：该方法用于打开与服务器的请求调用
• send()：该方法用于发送请求。

req.open("GET", "API LINK", true/false);

open() 方法采用以下三个参数：

• GET：第一个参数告诉它可以被获取或发布的请求的性质。
• API LINK：第二个参数是我们要通信的 API 链接。
• true/false：第三个参数告诉请求是异步的还是同步的。当它为真时意味着它是异步的，否则它是同步的。

示例 1：此示例说明了 Ajax 调用。

Javascript

function printUser()
{
    var xhr = new XMLHttpRequest();
    xhr.onload = function()
    {
        var response = JSON.parse(xhr.response);
        for(let i=0;i<5;i++)
        {
            console.log(response[i]['login']);
        }
    }
    xhr.open('get','https://api.github.com/users',true);
    xhr.send();
}
printUser();

输出：

mojombo
defunkt
pjhyett
wycats
ezmobius

在这种情况下，我们请求 GitHub API 提供用户列表，我们正在打印前 5 个用户。

创建自己的 Ajax 功能：在这种情况下，创建一个函数printMessage并将一个回调函数传递给它。并且该回调函数将简单地打印它将获得的响应值。在printMessage函数中，我们创建了一个 Ajax 对象，然后请求我们的sample.txt文件。在我们的 sample.txt 中，我们有消息“欢迎来到 GFG！”

当我们将该响应对象传递给回调函数和内部回调函数时，我们只是打印它。

示例 2：在本示例中，我们创建了一个sample.txt文件，在其中我们写道：“欢迎来到 GFG！ “。

Javascript

function printMessage(callback)
{
    var xhr = new XMLHttpRequest();
    xhr.open('get','sample.txt',true);
    xhr.onload = function()
    {
        callback(xhr);
    }
    xhr.send();
}
printMessage(function(request){
    console.log(request.responseText);
});

输出：

Welcome to GFG!