jQuery-Studiennotizen – Ajax-Operation (3) – Prozessverarbeitung_jquery

Beobachtungsfunktion

Die Funktionen ajaxStart und ajaxStop können als Beobachtungsfunktionen verwendet werden, und wir können die Rückruffunktion der Beobachtungsfunktion verwenden, um eine entsprechende Verarbeitung durchzuführen.

Die Callback-Funktion von ajaxStart wird ausgelöst, wenn die Ajax-Anfrage startet und keine weitere Übertragung erfolgt ist.
Wenn die letzte aktive Anfrage beendet ist, wird die über ajaxStop registrierte Rückruffunktion ausgeführt.
Da die Beobachtungsfunktion global ist, muss sie mit $(document) aufgerufen werden. Wir testen die beiden Funktionen mithilfe der Ajax-Methode, um ein Bildbeispiel zu erhalten:
Die aktuelle Seite ist:

<div></div>
<button>load</button>

Der Inhalt von test.html im selben Verzeichnis ist:

<img src="avatar.jpg" />

Möchten Sie ein Bild laden, nachdem Sie auf die Schaltfläche geklickt haben:

 $('button').click(function() {
  $('div').load('test.html');
 });

An dieser Stelle können wir die Funktionen ajaxStart und ajaxStop verwenden, um Eingabeaufforderungen hinzuzufügen:

 $(document).ajaxStart(function() {//
  alert('load a picture');
 }).ajaxStop(function() {
  alert('show a picture');
 });
 $('button').click(function() {
  $('div').load('test.html');
 });

Nachdem Sie zu diesem Zeitpunkt auf die Schaltfläche geklickt haben, werden Sie aufgefordert, ein Bild zu laden, bevor das Bild geladen wird, und nach dem Laden wird ein Bild angezeigt.

Fehlerbehandlung

Die am häufigsten verwendete Methode ist die globale AjaxError-Methode. Wenn wir eine Datenanforderung an eine Seite senden, die nicht existiert:

 $(document).ajaxError(function() {//
  alert('load failed!');
 });
 $('button').click(function() {
  $('div').load('noexsited.html');
 });

Nachdem Sie zu diesem Zeitpunkt auf die Schaltfläche geklickt haben:

Für Nicht-Lademethoden können Sie auch die Fail-Methode zur Verkettungsverarbeitung verwenden:

 $('button').click(function() {
  $.get('noexsited.html', function(data) {

  }).fail(function(jqXHR) {
   alert('status is ' + jqXHR.status);
  });
 });

JSONP

JSONP ist JSON mit Padding, gepolstertes JSON, das das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag verwendet, um Javascript-Dateien domänenübergreifend abzurufen, sodass JSON-Daten domänenübergreifend abgerufen werden können.
Das Format von JSONP besteht darin, eine Standard-JSON-Datei in ein Klammerpaar zu packen, dem eine beliebige Zeichenfolge vorangestellt ist. Diese Zeichenfolge mit der Bezeichnung P wird vom Client bestimmt, der die Daten anfordert.
Dieselbe Schaltfläche wie im obigen Beispiel. Zuerst setzen wir den Inhalt der externen Domain-Seite otherdomain.com/index.php auf:

<&#63;php
$data = '{ "name": "stephenlee", "sex": "male" }';
echo $_GET['callback'] .'('. $data .')';

Wir verwenden einen speziellen Platzhalter ?, um eine domänenübergreifende Erfassung von JSON-Daten zu erreichen:

 $('button').click(function() {
  $.getJSON('otherdomain.com/index.php?callback=?', function(data) {
   console.log(data);
  });
 });

Die Datenerfassung war erfolgreich.