Une brève discussion sur la façon de passer des appels et des requêtes AJAX à l'aide de JavaScript

Ajax est une technologie utilisée pour créer des applications Web meilleures, plus rapides et plus interactives. Cet article vous montrera comment utiliser JavaScript pour effectuer des appels et des requêtes AJAX.

Dans ce tutoriel, nous allons apprendre à passer des appels AJAX en utilisant JS.

1.AJAX

Le terme AJAX signifie JavaScript et XML asynchrones.

AJAX est utilisé dans JS pour effectuer des requêtes réseau asynchrones afin d'obtenir des ressources. Bien entendu, comme leur nom l'indique, les ressources ne se limitent pas au XML, mais peuvent également être utilisées pour obtenir des ressources telles que JSON, HTML ou du texte brut.

Il existe plusieurs façons d'effectuer des requêtes réseau et d'obtenir des données du serveur. Nous les présenterons un par un.

2.

est utilisé

XMLXMLHttpRequest car il est utilisé pour récupérer des données XML en premier lieu. Désormais, il peut également être utilisé pour récupérer du JSON, du HTML ou du texte brut.

Exemple 2.1 : GET

function success() {
  var data = JSON.parse(this.responseText)
  console.log(data)
}

function error (err) {
  console.log('Error Occurred:', err)
}

var xhr = new XMLHttpRequest()
xhr.onload = success
xhr.onerror = error
xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1")
xhr.send()

On voit que pour faire une simple requête GET, deux auditeurs sont nécessaires pour gérer la requête de succès et échec. Nous devons également appeler les méthodes et . La réponse du serveur est stockée dans une variable , qui est convertie en objet JavaScript à l'aide de .

function success() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function error(err) {
    console.log('Error Occurred :', err);
}

var xhr = new XMLHttpRequest();
xhr.onload = success;
xhr.onerror = error;
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
);

On voit que les requêtes POST sont similaires aux requêtes GET. Nous devons en outre définir l'en-tête de requête "Content-Type" en utilisant open() et envoyer le corps JSON sous forme de chaîne en utilisant send() dans la méthode d'envoi. responseTextJSON.parse()

2.3 XMLHttpRequest vs FetchsetRequestHeaderJSON.stringify

Les premiers développeurs utilisent pour demander des données depuis de nombreuses années. Le moderne nous permet de faire des requêtes réseau similaires à . La principale différence est que l'API utilise des

Promises

, ce qui rend l'API plus simple et plus concise et évite l'enfer des rappels. XMLHttpRequestfetch APIXMLHttpRequest（XHR）3. API Fetchfetch() Fetch est une API JavaScript native permettant d'effectuer des appels AJAX. Elle est prise en charge par la plupart des navigateurs et est désormais largement utilisée.

3.1 Utilisation de l'API

fetch(url, options)
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

Paramètres de l'API L'API a deux paramètres

1.

url

est un paramètre obligatoire, qui est le chemin de la ressource que vous souhaitez obtenir.

fetch()2,

est un paramètre facultatif. Il n'est pas nécessaire de fournir ce paramètre pour effectuer une simple requête GET.

méthode : GET | POST | PUT | DELETE | PATCH

optionsen-têtes de requête, tels que le mode

cors | no-cors | même origine | naviguer

• cache : par défaut | no-cache{ “Content-type”: “application/json; charset=UTF-8” }

  corps : généralement utilisé pour les requêtes POST
  • L'API renvoie un objet Promise

L'API renvoie un objet Promesse.

Sera rejeté s'il y a une erreur réseau, qui est gérée dans le bloc

.

fetch()Si la réponse du serveur est accompagnée d'un code d'état (tel que

,

,
• ), la promesse sera résolue. Les objets de réponse peuvent être gérés dans les blocs .catch().
• 200404Gestion des erreurs 500.then()
Veuillez noter que pour une réponse réussie, nous nous attendons à ce que le code d'état soit

(statut normal), mais même si la réponse est livré avec des codes d'état d'erreur tels que

(ressource introuvable) et (erreur interne du serveur)), l'état de l'API est également

et nous devons les gérer explicitement dans le

bloquer. 200404Nous pouvons voir le statut HTTP dans l'objet 500 : fetch()resolved.then()Code de statut HTTP, par exemple 200.

ok – Valeur booléenne, ou response si le code d'état HTTP est 200-299.

• 3.2 Exemple : GETtrue

const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .catch(err => console.error(err));

getTodoItem.then(response => console.log(response));

rrree

Il y a deux choses à noter dans le code ci-dessus :

L'API renvoie un objet de promesse que nous pouvons attribuer à une variable et exécuter plus tard.

• Il faut également appeler

  pour convertir l'objet de réponse en JSONfetch

• Gestion des erreursresponse.json()

Jetons un coup d'œil à ce qui se passe lorsqu'une requête HTTP

renvoie une erreur 500 :

Response

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

rrree Nous voyons que même si l'API renvoie une erreur 500, elle va toujours au bloc en premier , où block, il ne peut pas analyser l'erreur JSON et renvoie l'erreur détectée par le bloc

.

GETCela signifie que si nous utilisons l'

API, nous devons gérer ces erreurs explicitement comme ceci :-

fetch('http://httpstat.us/500') // this API throw 500 error
  .then(response => () => {
    console.log("Inside first then block");
    return response.json();
  })
  .then(json => console.log("Inside second then block", json))
  .catch(err => console.error("Inside catch block:", err));

rrreethen()catch()

3.3 Exemple : POST

fetch()

fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    body: JSON.stringify({
      completed: true,
      title: 'new todo item',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))

Response
➤ {completed: true, title: "new todo item", userId: 1, id: 201}

在上面的代码中需要注意两件事:-

• POST请求类似于GET请求。 我们还需要在fetch() API的第二个参数中发送method，body 和headers 属性。

• 我们必须需要使用 JSON.stringify() 将对象转成字符串请求body 参数

4.Axios API

Axios API非常类似于fetch API，只是做了一些改进。我个人更喜欢使用Axios API而不是fetch() API，原因如下：

• 为GET 请求提供 axios.get()，为 POST 请求提供 axios.post()等提供不同的方法，这样使我们的代码更简洁。
• 将响应代码（例如404、500）视为可以在catch()块中处理的错误，因此我们无需显式处理这些错误。
• 它提供了与IE11等旧浏览器的向后兼容性
• 它将响应作为JSON对象返回，因此我们无需进行任何解析

4.1 示例：GET

// 在chrome控制台中引入脚本的方法

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/axios/dist/axios.min.js';
document.head.appendChild(script);

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.data))
  .catch(err => console.error(err));

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

我们可以看到，我们直接使用response获得响应数据。数据没有任何解析对象，不像fetch() API。

错误处理

axios.get('http://httpstat.us/500')
  .then(response => console.log(response.data))
  .catch(err => console.error("Inside catch block:", err));

Inside catch block: Error: Network Error

我们看到，500错误也被catch()块捕获，不像fetch() API，我们必须显式处理它们。

4.2 示例：POST

axios.post('https://jsonplaceholder.typicode.com/todos', {
      completed: true,
      title: 'new todo item',
      userId: 1
  })
  .then(response => console.log(response.data))
  .catch(err => console.log(err))

 {completed: true, title: "new todo item", userId: 1, id: 201}

我们看到POST方法非常简短，可以直接传递请求主体参数，这与fetch（）API不同。

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!