Verstehen Sie die Grundlagen der Ajax-Datenanfrage

🔜 Durchsuchen der Website-Anwendungserfahrung. „Ajax-Anwendungsszenarien“

Ajax-Funktionsprinzip

Ajax entspricht dem Agenten, mit dem der Browser Anfragen sendet und Antworten empfängt, um Seitendaten teilweise zu aktualisieren, ohne das Surfen des Benutzers auf der Seite zu beeinträchtigen, wodurch das Benutzererlebnis verbessert wird.

Ajax-Implementierungsschritte

 var xhr = new XMLHttpRequest();

Teilen Sie Ajax die Anforderungsadresse und die Anforderungsmethode mit

xhr.open('get', 'http://www.example.com');

Senden Sie die Anfrage

 xhr.send();

Holen Sie sich die Anfrage vom Server an die Client-Antwort Daten

xhr.onload = function () {
     console.log(xhr.responseText);
 }

Datenformat der serverseitigen Antwort
In realen Projekten verwendet die Serverseite in den meisten Fällen JSON-Objekte als Antwortdatenformat. Wenn der Client die Antwortdaten erhält, muss er die JSON-Daten und die HTML-Zeichenfolge zusammenfügen und dann das zusammengefügte Ergebnis auf der Seite anzeigen.

Im Prozess der HTTP-Anfrage und -Antwort werden, unabhängig davon, ob es sich um Anforderungsparameter oder Antwortinhalte handelt, wenn es sich um einen Objekttyp handelt, diese schließlich zur Übertragung in eine Objektzeichenfolge konvertiert.

JSON.parse() // 将 json 字符串转换为json对象

Übergabe von Anforderungsparametern
Übermittlung traditioneller Website-Formulare

             

 GET-Anforderungsmethode

xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');

POST-Anforderungsmethode

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');

Anforderungsnachricht
1. Der im Prozess der HTTP-Anforderung und -Antwort übergebene Datenblock wird als Bericht bezeichnet Das Dokument enthält die zu übermittelnden Daten und einige zusätzliche Informationen. Diese Daten und Informationen müssen dem vorgeschriebenen Format entsprechen.

1. Format der Anforderungsparameter

1. application/x-www-form-urlencoded

 name=zhangsan&age=20&sex=男

1. application/json

{name: 'zhangsan', age: '20', sex: '男'}

Geben Sie den Wert des Content-Type-Attributs im Anforderungsheader als application/ an json, sagen Das aktuelle Anforderungsparameterformat auf der Serverseite ist json.

JSON.stringify() // 将json对象转换为json字符串

Hinweis: Die Get-Anfrage kann das JSON-Objektdatenformat nicht übermitteln, und die Formularübermittlung herkömmlicher Websites unterstützt das JSON-Objektdatenformat nicht.

Erhalten Sie die serverseitige Antwort

Ajax-Statuscode

Nach dem Erstellen des Ajax-Objekts, dem Konfigurieren des Ajax-Objekts, dem Senden der Anforderung und dem Empfangen der serverseitigen Antwortdaten entspricht jeder Schritt im Prozess einem Wert, und dieser Wert ist ein Ajax-Statuscode.

0: Die Anfrage ist nicht initialisiert (open() wurde noch nicht aufgerufen)

1: Die Anfrage wurde eingerichtet, aber nicht gesendet (send() wurde noch nicht aufgerufen) 2: Die Anfrage wurde noch nicht aufgerufen gesendet 3: Die Anfrage wird verarbeitet, normalerweise sind einige Daten in der Antwort bereits verfügbar
4: Die Antwort wurde abgeschlossen und die Antwort des Servers kann abgerufen und verwendet werden

xhr.readyState // 获取Ajax状态码

onreadystatechange-Ereignis

Dieses Ereignis wird automatisch ausgelöst werden, wenn sich der Ajax-Statuscode ändert.
1. Der Ajax-Statuscode kann in der Ereignisverarbeitungsfunktion abgerufen und beurteilt werden. Wenn der Statuscode 4 ist, können die serverseitigen Antwortdaten über xhr.responseText abgerufen werden.

// 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

Der Unterschied zwischen zwei Möglichkeiten, serverseitige Antworten zu erhalten

Ajax-Fehlerbehandlung

1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
   可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
2. 网络畅通，服务器端没有接收到请求，返回404状态码。
   检查请求地址是否错误。
3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。
   服务器端错误，找后端程序员进行沟通。
4. 网络中断，请求无法发送到服务器端。
   会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

低版本 IE 浏览器的缓存问题
问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax 异步编程

Ajax 封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。

ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) { 
         console.log(data);
     }
 })

Ajax 概述

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

Ajax 的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

相关学习推荐：javascript视频教程

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Grundlagen der Ajax-Datenanfrage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!