如何从 JavaScript 进行 ajax 调用？

Ajax 代表异步 JavaScript 和 XML。它用于与服务器进行异步通信。 Ajax 用于从服务器读取数据并更新页面或向服务器发送数据，而不影响当前客户端页面。 Ajax 是一个编程概念。

下面是一些在 JavaScript 中进行 Ajax 调用的方法。

方法 1：在这种方法中，我们将使用 XMLHttpRequest 对象进行 Ajax 调用。这 XMLHttpRequest()方法创建用于向服务器发出请求的 XMLHttpRequest 对象。

句法：

var xhttp = new XMLHttpRequest();

以上语法用于创建 XMLHttpRequest 对象。该对象有许多不同的方法用于与服务器交互以发送、接收或中断来自服务器的响应。在响应中，我们从我们打印的服务器获取一个字符串。

例子：

Javascript

    function run() {
  
        // Creating Our XMLHttpRequest object 
        var xhr = new XMLHttpRequest();
  
        // Making our connection  
        var url = 'https://jsonplaceholder.typicode.com/todos/1';
        xhr.open("GET", url, true);
  
        // function execute after request is successful 
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
            }
        }
        // Sending our request 
        xhr.send();
    }
    run();

输出：

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

方法 2：在这种方法中，我们将使用 jQuery 进行 ajax 调用。 ajax()方法在 jQuery 中用于进行 ajax 调用。它被用作所有无法进行 ajax 调用的方法的替代品。

句法：

$.ajax({arg1: value, arg2: value, ... });

参数：它需要一个配置文件，配置URL，类型，在我们得到响应或错误时调用的函数等。

例子：

HTML

  

    
    

  

  
    
  
        function ajaxCall() {
            $.ajax({
  
                // Our sample url to make request 
                url: 
    'https://jsonplaceholder.typicode.com/todos/1',
  
                // Type of Request
                type: "GET",
  
                // Function to call when to
                // request is ok 
                success: function (data) {
                    var x = JSON.stringify(data);
                    console.log(x);
                },
  
                // Error handling 
                error: function (error) {
                    console.log(`Error ${error}`);
                }
            });
        }
        ajaxCall();
    

  

输出：

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

方法 3：在这种方法中，我们将使用fetch() 用于与服务器生成 XMLHttpRequest 的 API。由于其结构灵活，使用方便。该 API 向服务器发出请求，并将结果作为 promise 解析为字符串。

句法：

fetch(url, {config}).then().catch();

参数：以请求的URL和配置为参数。

我们将配置所需的数据并向服务器发出请求。由于这是一个已解决的承诺，我们使用then() 函数和catch()函数为结果创建输出。作为响应，我们得到了我们打印的字符串。

例子：

Javascript

  
    // Url for the request 
    var url = 'https://jsonplaceholder.typicode.com/todos/1';
  
    // Making our request 
    fetch(url, { method: 'GET' })
        .then(Result => Result.json())
        .then(string => {
  
            // Printing our response 
            console.log(string);
              
            // Printing our field of our response
            console.log(`Title of our response :  ${string.title}`);
        })
        .catch(errorMsg => { console.log(errorMsg); });

输出：

{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response :  delectus aut autem