Heim > Artikel > Web-Frontend > Detailliertes Beispiel eines jQuery Mockjax-Plug-Ins, das Ajax request_jquery simuliert

Detailliertes Beispiel eines jQuery Mockjax-Plug-Ins, das Ajax request_jquery simuliert

WBOYOriginal: 2016-05-16 15:20:371230Durchsuche

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery mobile artEditor rich text editor_jqueryNächster Artikel：jQuery mobile artEditor rich text editor_jquery

In Verbindung stehende Artikel

Mehr sehen