如何创建自己的Ajax功能

在这篇文章中，我们将讨论如何创建自己的Ajax功能。但在创建功能之前，我们将讨论 Ajax 。

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

Ajax工作原理： 我们知道请求可以是同步的或异步的。在同步请求的情况下，我们会等待请求完成后才执行下一个请求。

但在异步请求的情况下，我们不会等待请求解决才执行下一个任务。我们会继续执行下一个任务。Ajax以异步方式工作。在后台，它通过与服务器通信而无需重新加载整个网页来更新我们的网页。

我们可以使用以下语法来创建一个Ajax对象：

语法：

var req = new XMLHttpRequest();

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

open( )： 该方法用于与服务器建立请求。
send( )： 该方法用于发送请求。

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

open()方法有三个参数，解释如下：

GET： 第一个参数指定请求的性质，可以是get或post。
API LINK： 第二个参数是要通信的API链接。
true/false： 第三个参数指定请求是异步还是同步。当值为true时，表示异步；否则为同步。

示例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); 
});

输出: