Eine kurze Diskussion darüber, wie man AJAX-Aufrufe und -Anfragen mit JavaScript durchführt

Ajax ist eine Technologie zur Erstellung besserer, schnellerer und interaktiverer Webanwendungen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript AJAX-Aufrufe und -Anfragen durchführen.

In diesem Tutorial lernen wir, wie man AJAX-Aufrufe mit JS durchführt.

1.AJAX

Der Begriff AJAX steht für Asynchronous JavaScript and XML.

AJAX wird in JS verwendet, um asynchrone Netzwerkanforderungen zum Abrufen von Ressourcen zu stellen. Wie der Name schon sagt, sind Ressourcen natürlich nicht auf XML beschränkt, sondern können auch zum Abrufen von Ressourcen wie JSON, HTML oder einfachem Text verwendet werden.

Es gibt mehrere Möglichkeiten, Netzwerkanfragen zu stellen und Daten vom Server abzurufen. Wir werden sie einzeln vorstellen.

2.XMLHttpRequest

XMLHttpRequest-Objekt (abgekürzt als XMLHttpRequest对象（简称XHR）在较早的时候用于从服务器异步检索数据。

之所以使用XML，是因为它首先用于检索XML数据。现在，它也可以用来检索JSON, HTML或纯文本。

事例 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()

我们看到，要发出一个简单的GET请求，需要两个侦听器来处理请求的成功和失败。我们还需要调用open()和send()方法。来自服务器的响应存储在responseText变量中，该变量使用JSON.parse()转换为JavaScript 对象。

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

我们看到POST请求类似于GET请求。 我们需要另外使用setRequestHeader设置请求标头“Content-Type” ，并使用send方法中的JSON.stringify将JSON正文作为字符串发送。

2.3 XMLHttpRequest vs Fetch

早期的开发人员，已经使用了好多年的 XMLHttpRequest来请求数据了。 现代的fetch API允许我们发出类似于XMLHttpRequest（XHR）的网络请求。 主要区别在于fetch() API使用Promises，它使 API更简单，更简洁，避免了回调地狱。

3. Fetch API

Fetch 是一个用于进行AJAX调用的原生 JavaScript API，它得到了大多数浏览器的支持，现在得到了广泛的应用。

3.1 API用法

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

API参数

fetch() API有两个参数

1、url是必填参数，它是您要获取的资源的路径。

2、options是一个可选参数。不需要提供这个参数来发出简单的GET请求。

• method: GET | POST | PUT | DELETE | PATCH

• headers: 请求头，如  { “Content-type”: “application/json; charset=UTF-8” }

  • mode: cors | no-cors | same-origin | navigate
  • cache: default | reload | no-cache
  • body: 一般用于POST请求

API返回Promise对象

fetch() API返回一个promise对象。

• 如果存在网络错误，则将拒绝，这会在.catch()块中处理。
• 如果来自服务器的响应带有任何状态码(如200、404、500)，则promise将被解析。响应对象可以在.then()块中处理。

错误处理

请注意，对于成功的响应，我们期望状态代码为200（正常状态），但是即使响应带有错误状态代码（例如404（未找到资源）和500（内部服务器错误）），fetch() API 的状态也是 resolved，我们需要在.then() 块中显式地处理那些。

我们可以在response 对象中看到HTTP状态：

• HTTP状态码，例如200。
• ok –布尔值，如果HTTP状态代码为200-299，则为true。

3.2 示例：GET

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

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

Response

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

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

• fetch API返回一个promise对象，我们可以将其分配给变量并稍后执行。

• 我们还必须调用response.json()将响应对象转换为JSON

错误处理

我们来看看当HTTP GET请求抛出500错误时会发生什么：

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));

Inside first then block
➤ ⓧ Inside catch block: SyntaxError: Unexpected token I in JSON at position 4

我们看到，即使API抛出500错误，它仍然会首先进入then()块，在该块中它无法解析错误JSON并抛出catch()块捕获的错误。

这意味着如果我们使用fetch()XHR

) wurde früher verwendet, um Daten asynchron vom Server abzurufen.

Der Grund, warum XML verwendet wird, liegt darin, dass es in erster Linie zum Abrufen von XML-Daten verwendet wird. Jetzt kann es auch zum Abrufen von JSON, HTML oder einfachem Text verwendet werden.

🎜🎜Fall 2.1: GET🎜🎜🎜

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

function handleErrors(response) {
  if (!response.ok) { // throw error based on custom conditions on response
      throw Error(response.statusText);
  }
  return response;
}

🎜Wir sehen, dass für eine einfache GET-Anfrage zwei Listener erforderlich sind, um den Erfolg und Misserfolg der Anfrage zu verarbeiten. Wir müssen auch die Methoden open() und send() aufrufen. Die Antwort vom Server wird in der Variablen responseText gespeichert, die mit JSON.parse() in ein JavaScript-Objekt konvertiert wird. 🎜

 ➤ Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)

🎜Wir sehen, dass POST-Anfragen den GET-Anfragen ähneln. Wir müssen zusätzlich den Anforderungsheader „Content-Type“ mit setRequestHeader festlegen und den JSON-Body als String mit JSON.stringify in der Sendemethode senden. 🎜🎜🎜🎜2.3 XMLHttpRequest vs. Fetch🎜🎜🎜🎜Frühe Entwickler verwenden seit vielen Jahren XMLHttpRequest, um Daten anzufordern. Die moderne fetch API ermöglicht es uns, Netzwerkanfragen ähnlich wie XMLHttpRequest (XHR) zu stellen. Der Hauptunterschied besteht darin, dass die API fetch() 🎜Promises🎜 verwendet, was die API einfacher und prägnanter macht und die Callback-Hölle vermeidet. 🎜

🎜3. Fetch API🎜🎜🎜Fetch ist eine native JavaScript-API zum Durchführen von AJAX-Aufrufen. Sie wird von den meisten Browsern unterstützt und ist mittlerweile weit verbreitet. 3.1 API-Nutzung . Weg. 🎜🎜2. options ist ein optionaler Parameter. Es ist nicht erforderlich, diesen Parameter bereitzustellen, um eine einfache GET-Anfrage zu stellen. 🎜

• Methode: GET |. DELETE | UTF -8“ 🎜
  • mode: no-cors | li >body: Wird im Allgemeinen für POST-Anfragen verwendet

🎜🎜API gibt Promise-Objekt zurück🎜🎜🎜fetch() API gibt ein Promise-Objekt zurück. 🎜

• Ablehnen, wenn ein Netzwerkfehler vorliegt, dies wird im .catch()-Block behandelt.
• Wenn die Antwort vom Server einen Statuscode hat (z. B. 200, 404, 500), gilt das Versprechen Wille wird analysiert. Antwortobjekte können in .then()-Blöcken verarbeitet werden.

🎜🎜Fehlerbehandlung🎜🎜🎜Bitte beachten Sie, dass wir für eine erfolgreiche Antwort einen Statuscode von 200 (normaler Status) erwarten, aber auch wenn die Antwort einen Fehler enthält Statuscode (z. B. 404 (Ressource nicht gefunden) und 500 (interner Serverfehler)), der Status der fetch()-API ist auch aufgelöstcode>, müssen wir diese explizit im .then()-Block behandeln. 🎜🎜Wir können den HTTP-Status im response-Objekt sehen: 🎜

• HTTP-Statuscode, z. B. 200.
• ok – Boolescher Wert, true, wenn der HTTP-Statuscode 200–299 ist.

🎜🎜🎜3.2 Beispiel: GET🎜🎜🎜

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}

🎜Im obigen Code sind zwei Dinge zu beachten:🎜

• 🎜fetch API gibt ein Promise-Objekt zurück, das wir einer Variablen zuweisen und später ausführen können. 🎜
• 🎜Wir müssen auch response.json() aufrufen, um das Antwortobjekt in JSON zu konvertieren🎜

🎜🎜Fehlerbehandlung🎜🎜🎜Mal sehen Sehen Sie, was passiert, wenn eine HTTP-GET-Anfrage einen 500-Fehler auslöst: 🎜

// 在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));

🎜Wir sehen, dass selbst wenn die API einen 500-Fehler auslöst, sie immer noch zuerst zu then() geht -Block, in dem die JSON-Fehleranalyse fehlschlägt und der vom catch()-Block abgefangene Fehler ausgegeben wird. 🎜🎜Das bedeutet, dass wir, wenn wir die API fetch() verwenden, solche Fehler explizit wie folgt behandeln müssen:-🎜

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

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

🎜🎜🎜3.3 Beispiel: POST🎜🎜🎜

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不同。

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

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man AJAX-Aufrufe und -Anfragen mit JavaScript durchführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!