Web-Frontend
js-Tutorial
Detailliertes Beispiel eines jQuery Mockjax-Plug-Ins, das Ajax request_jquery simuliert
Detailliertes Beispiel eines jQuery Mockjax-Plug-Ins, das Ajax request_jquery simuliert
1. Prinzip
jquery-mockjax wird verwendet, um die Rückgabedaten der Front-End-Ajax-Anfrage im Hintergrund zu verspotten.
Das Prinzip ist ganz einfach
Fügen Sie einen Haltepunkt in Ihrem JS-Code ein, an dem Sie eine Ajax-Anfrage senden möchten, und vergleichen Sie dann den Wert von $.ajax.toString() im Fall von [Einführung von jquery-mockjax] und [ohne Einführung von jquery-mockjax] .
Wenn jquery-mockjax eingeführt wird, wird diese Scheinbibliothek natürlich die von jquery bereitgestellte Ajax-Funktion ersetzen. Das macht es leicht, sich darüber lustig zu machen.
Im eigentlichen Entwicklungsprozess haben Front-End und Back-End eine einheitliche Schnittstelle ausgehandelt und dann jeweils ihre eigenen Aufgaben gestartet. Derzeit habe ich eine solche Ajax-Anfrage, die Daten aus dem Hintergrund abrufen muss:
$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
}); Aber dieser Dienst wurde möglicherweise noch nicht erstellt. Vielleicht ist der Typ, der das Backend entwickelt hat (diese hübschen Leute, die PHP, Ruby, .NET, GoldFusion usw. verwenden), abgewandert, oder vielleicht ist er mit anderen Dingen beschäftigt. Wie auch immer, wenn diese Anfrage gestellt wird, erhalte ich nicht die gewünschten Ergebnisse, sondern lediglich die Fehlermeldung 404 (Nicht gefunden).
Das ist wirklich schlecht und Drängen nützt nichts. Die Tester neben mir drängen darauf, es zu testen, und ich bin gespannt auf sofortige Ergebnisse. Zu diesem Zeitpunkt können Sie sich nur auf sich selbst verlassen. Eine der besseren Methoden besteht darin, Ajax-Anfragen zu simulieren. Hier verwende ich das jQuery Mockjax-Plug-in.
Adresse: jQuery Mockjax
Dies ist ein jQuery-Plugin. Wenn Sie es herunterladen und zitieren, platzieren Sie es nach jQuery:
<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="vendor/jquery.mockjax.js"></script> </body> </html>
Führen Sie dann den Code aus, um die Anforderung vor dem Anforderungscode zu simulieren, verwenden Sie die vom Plug-In bereitgestellte Methode $.mockjax() und geben Sie vorübergehend die beiden Parameter URL und ResponseText an:
$.mockjax({
url: '/products/',
responseText: 'Here you are!'
}); Es überwacht Ajax-Anfragen mit derselben URL und fängt die Antwort ab und simuliert sie, wenn die Anfrage ausgegeben wird. Der Wert von „responseText“ ist der simulierte Antwortinhalt, sodass mein Programm problemlos ausgeführt werden kann. Das laufende Ergebnis des ersten Beispiels ist „Hier sind Sie“ Dieser Inhalt wird in div#result angezeigt. Wenn ich die Anfrage nicht mehr verspotten muss, kann ich sie mit der Methode $.mockjax.clear() löschen:
$.mockjax.clear();
Sobald die Entwicklung des Hintergrunddienstes abgeschlossen ist, kann ich diese Methode verwenden, um alle simulierten Anforderungen zu löschen und den tatsächlichen Anforderungseffekt zu erleben. Wenn Sie nicht alle Simulationsanfragen auf einmal löschen möchten, sondern stattdessen auf eine bestimmte Simulationsanfrage abzielen möchten, können Sie die ID der Simulationsanfrage übergeben und jede Simulationsanfrage gibt einen ID-Wert zurück:
var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo); Dadurch wird die zweite Simulationsanforderung gelöscht und die erste beibehalten.
Da die URL-Adresse der Ajax-Anfrage mit der URL der simulierten Anfrage übereinstimmen muss, ist es zum Glück sehr mühsam, jede Anfrage zu simulieren, vorausgesetzt, es gibt viele Anfragen auf der Seite stellt einen Platzhalter * bereit. Methode:
$.mockjax({
url: '/books/*'
}); Zusätzlich zum Abgleichen von Anfragen mit der URL-Adresse /books/cook können Sie Anfragen auch mit der Adresse /books/math und mehr abgleichen. Sie können sogar reguläre Ausdrücke für komplexere Abgleichsmuster verwenden:
$.mockjax({
url: /^\/data\/(cook|math)$/i
}); Verwenden Sie den Datenparameter des Plug-Ins, um verschiedene simulierte Antworten basierend auf unterschiedlichen Anforderungsdaten durchzuführen:
$.mockjax({
url: '/books/',
data: {
type: 'cook'
},
responseText: 'You want a cook book!'
});
$.mockjax({
url: '/books/',
data: {
type: 'math'
},
responseText: {
"content": "You want a math book!"
}
}); Selbst für dieselbe URL-Adresse ist der erhaltene Antwortinhalt unterschiedlich, wenn die angeforderten Daten unterschiedlich sind. Zusätzlich zu reinen Textzeichenfolgen kann der Antwortinhalt auch JSON
verwenden
Zeichenfolge formatieren.
Das Plug-in stellt außerdem ein Standardparametereinstellungsobjekt $.mockjaxSettings bereit. Parameter, die nicht angegeben sind, verwenden diese Standardwerte:
$.mockjaxSettings = {
logging: true,
status: 200,
statusText: "OK",
responseTime: 500,
isTimeout: false,
throwUnmocked: false,
contentType: 'text/plain',
response: '',
responseText: '',
responseXML: '',
proxy: '',
proxyType: 'GET',
lastModified: null,
etag: '',
headers: {
etag: 'IJF@H#@923uf8023hFO@I#H#',
'content-type' : 'text/plain'
}
}; Nachdem der Standardwert geändert wurde, verwenden nachfolgende Simulationsanforderungen den geänderten Wert:
$.mockjaxSettings.contentType = "application/json";
Hier wird nur der Standardwert von contentType geändert.
Das Obige erklärt die relevanten Kenntnisse des jQuery Mockjax-Plug-Ins zur Simulation von Ajax-Anfragen anhand von Beispielen. Ich hoffe, dass es für alle hilfreich ist.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1389
52
Wie kann das Timeout von Ajax-Anfragen verlängert werden?
Jan 26, 2024 am 10:09 AM
Wie kann die Ablaufzeit von Ajax-Anfragen verlängert werden? Bei Netzwerkanfragen stoßen wir oft auf Situationen, in denen wir große Datenmengen oder komplexe Berechnungen verarbeiten müssen, was dazu führen kann, dass die Anfrage abläuft und die Daten nicht normal zurückgegeben werden. Um dieses Problem zu lösen, können wir sicherstellen, dass die Anfrage erfolgreich abgeschlossen werden kann, indem wir die Ablaufzeit der Ajax-Anfrage verlängern. Im Folgenden werden einige Methoden und spezifische Codebeispiele vorgestellt, um die Ablaufzeit von Ajax-Anfragen zu verlängern. Wenn Sie eine Ajax-Anfrage mit dem Timeout-Attribut stellen, können Sie das Timeout-Attribut auf setzen
Wie lange dauert es, bis Ajax-Anfragen ablaufen?
Nov 20, 2023 am 10:29 AM
AJAX-Anfragen haben keine feste Ablaufzeit: „Asynchronous JavaScript and XML“ ist eine Technologie zum Senden asynchroner Anfragen auf Webseiten, die JavaScript verwendet, um Anfragen an den Server zu senden und Antworten zu empfangen, ohne die gesamte Seite zu aktualisieren.
So verwenden Sie Controller zur Verarbeitung von Ajax-Anfragen im Yii-Framework
Jul 28, 2023 pm 07:37 PM
Im Yii-Framework spielen Controller eine wichtige Rolle bei der Bearbeitung von Anfragen. Zusätzlich zur Verarbeitung regulärer Seitenanfragen können Controller auch zur Verarbeitung von Ajax-Anfragen verwendet werden. In diesem Artikel wird erläutert, wie Ajax-Anfragen im Yii-Framework verarbeitet werden, und es werden Codebeispiele bereitgestellt. Im Yii-Framework kann die Verarbeitung von Ajax-Anfragen über die folgenden Schritte erfolgen: Erstellen Sie zunächst eine Controller-Klasse (Controller). Sie können die vom Yii-Framework bereitgestellte grundlegende Controller-Klasse yiiwebCo erben
So wählen Sie die richtige Ajax-Anfragebibliothek für Ihr Projekt aus
Jan 30, 2024 am 08:32 AM
Praxisratgeber: Welche Ajax-Request-Bibliotheken eignen sich für Ihr Projekt? Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklung ist Ajax zu einem unverzichtbaren Bestandteil der Webentwicklung geworden. Die Auswahl einer für das Projekt geeigneten Ajax-Anfragebibliothek ist entscheidend für die Verbesserung der Entwicklungseffizienz und die Optimierung der Benutzererfahrung. In diesem Artikel werden mehrere häufig verwendete Ajax-Anforderungsbibliotheken vorgestellt, um den Lesern bei der Auswahl des für ihre eigenen Projekte geeigneten Tools zu helfen. jQueryAjax Es lässt sich nicht leugnen, dass jQuery eine der beliebtesten JavaScript-Bibliotheken überhaupt ist. Es bietet eine reichhaltige
Wesentliche Tools: Verstehen Sie, was die häufig verwendeten Ajax-Anfragebibliotheken sind?
Jan 30, 2024 am 11:00 AM
Entwicklungsgrundlagen: Entdecken Sie die häufig verwendeten Ajax-Anfragebibliotheken. In der modernen Front-End-Entwicklung ist die Verwendung von Ajax für asynchrone Anfragen zu einer Standardfunktion geworden, und die Auswahl einer geeigneten Ajax-Anfragebibliothek kann es uns ermöglichen, Netzwerkanfragen effizienter zu verarbeiten und so die Entwicklungseffizienz und das Benutzererlebnis zu verbessern. In diesem Artikel werden einige häufig verwendete Ajax-Anforderungsbibliotheken untersucht, um Entwicklern bei der Auswahl der für ihre Projekte geeigneten Tools zu helfen. jQueryAjax: Als eine der beliebtesten JavaScript-Bibliotheken bietet jQuery leistungsstarke Ajax-Anfragefunktionen.
Kann ich die Ablaufzeit von Ajax-Anfragen anpassen?
Jan 26, 2024 am 11:13 AM
Kann die Ablaufzeit von Ajax-Anfragen angepasst werden? In der Webentwicklung verwenden wir häufig Ajax, um asynchrone Anforderungen zum dynamischen Laden von Daten auf der Seite zu implementieren. Wenn wir Ajax-Anfragen stellen, müssen wir manchmal das Timeout der Anfrage kontrollieren, also ein Zeitlimit festlegen und sie verarbeiten, wenn innerhalb der angegebenen Zeit keine Antwort eingeht. Kann die Ablaufzeit von Ajax-Anfragen angepasst werden? In diesem Artikel wird dieses Problem ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt. Verwendung der Ajax-Funktion von jQuery
Was verursacht eine Zeitüberschreitung bei einer Ajax-Anfrage?
Jan 26, 2024 am 10:53 AM
Unter welchen Umständen läuft eine Ajax-Anfrage ab? Mit der Entwicklung von Webanwendungen ist die Ajax-Technologie (Asynchronous JavaScript and XML) zu einem wesentlichen Bestandteil der Webentwicklung geworden. Über Ajax können wir Daten vom Server abrufen und den Inhalt der Webseite dynamisch aktualisieren, ohne die gesamte Seite zu aktualisieren. Wenn Sie jedoch Ajax zum Senden von Anforderungen verwenden, kommt es manchmal vor, dass die Anforderung abläuft. Unter welchen Umständen läuft eine Ajax-Anfrage ab?
Wie stelle ich das Timeout für Ajax-Anfragen ein?
Jan 26, 2024 am 09:23 AM
Wie lege ich die Ablaufzeit einer Ajax-Anfrage fest? Benötigen Sie spezifische Codebeispiele? Mit der Entwicklung von Internetanwendungen ist Ajax zu einem unverzichtbaren Bestandteil der Webentwicklung geworden. Beim Senden von Ajax-Anfragen müssen wir manchmal die Ablaufzeit der Anfrage begrenzen, um eine schlechte Benutzererfahrung oder ein Einfrieren des Browsers aufgrund einer zu langen Anfrage zu verhindern. In diesem Artikel wird detailliert beschrieben, wie die Ablaufzeit von Ajax-Anfragen festgelegt wird, und es werden spezifische Codebeispiele aufgeführt. Das Festlegen der Ablaufzeit von Ajax-Anfragen erfordert hauptsächlich XMLHttpRequest
