Exemple détaillé du plug-in jQuery Mockjax simulant Ajax request

Exemple détaillé du plug-in jQuery Mockjax simulant Ajax request_jquery

WBOY

Libérer： 2016-05-16 15:20:37

original

1280 Les gens l'ont consulté

1.Principe

jquery-mockjax est utilisé pour simuler les données de retour de la requête ajax frontale en arrière-plan.

Le principe est très simple

Placez un point d'arrêt dans votre code js à l'endroit où vous souhaitez envoyer une requête ajax, puis comparez la valeur de $.ajax.toString() dans le cas de [présentant jquery-mockjax] et [sans introduire jquery-mockjax] .

Évidemment, lorsque jquery-mockjax sera introduit, cette bibliothèque fictive remplacera la fonction ajax fournie par jquery. Cela facilite la moquerie.

Dans le processus de développement proprement dit, le front-end et le back-end ont négocié une interface unifiée, puis chacun a commencé ses propres tâches. En ce moment, j'ai une telle requête Ajax qui nécessite d'obtenir des données en arrière-plan :

$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
});

Copier après la connexion

Mais ce service n'a peut-être pas encore été créé. Peut-être que le gars qui a développé le backend (ces beaux gars qui utilisent PHP, Ruby, .NET, GoldFusion, etc.) a déserté, ou peut-être qu'il est occupé avec autre chose. Quoi qu'il en soit, lorsque cette demande est faite, je n'obtiens pas les résultats souhaités, j'obtiens juste une erreur 404 (Not Found).

C'est vraiment mauvais, et insister est inutile. Les testeurs à côté de moi réclament de le tester, et j'ai hâte de voir des résultats immédiats. Pour le moment, vous ne pouvez compter que sur vous-même. L'une des meilleures méthodes consiste à simuler les requêtes Ajax. Ici, j'utilise le plug-in jQuery Mockjax.

Adresse : jQuery Mockjax

Il s'agit d'un plug-in jQuery. Lorsque vous le téléchargez et le citez, placez-le après 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>

Copier après la connexion

Exécutez ensuite le code pour simuler la requête avant le code de la requête, utilisez la méthode $.mockjax() fournie par le plug-in, et précisez temporairement les deux paramètres url et ResponseText :

$.mockjax({
url: '/products/',
responseText: 'Here you are!'
});

Copier après la connexion

Il surveillera les requêtes Ajax avec la même URL et interceptera et simulera la réponse lorsque la requête est émise. La valeur de ResponseText est le contenu de la réponse simulée, afin que mon programme puisse être exécuté avec plaisir. est 'Vous y êtes'. Ce contenu sera affiché dans div#result. Lorsque je n'ai plus besoin de me moquer de la requête, je peux utiliser la méthode $.mockjax.clear() pour l'effacer :

$.mockjax.clear();

Une fois le développement du service en arrière-plan terminé, je peux utiliser cette méthode pour effacer toutes les requêtes simulées et expérimenter l'effet réel de la requête. Si vous ne souhaitez pas effacer toutes les demandes de simulation en même temps, mais plutôt cibler une certaine demande de simulation, vous pouvez transmettre l'ID de la demande de simulation, et chaque demande de simulation renverra une valeur d'ID :

var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo);

Copier après la connexion

Cela efface la deuxième demande de simulation et conserve la première.

Étant donné que l'adresse url de la requête Ajax doit correspondre à l'url de la requête simulée, en supposant qu'il y ait beaucoup de requêtes sur la page, il sera très pénible de simuler chaque requête Heureusement, le paramètre url du plug-in. fournit un caractère générique * Méthode :

$.mockjax({
url: '/books/*'
});

Copier après la connexion

En plus de faire correspondre les requêtes avec l'adresse URL /books/cook, vous pouvez également faire correspondre les requêtes avec l'adresse /books/math et plus encore. Vous pouvez même utiliser des expressions régulières pour des modèles de correspondance plus complexes :
.

$.mockjax({
url: /^\/data\/(cook|math)$/i
});

Copier après la connexion

Utilisez le paramètre data du plug-in pour effectuer différentes réponses simulées en fonction de différentes données de requête :

$.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!"
}
});

Copier après la connexion

Même pour une même adresse URL, le contenu de la réponse obtenue est différent lorsque les données demandées sont différentes. En plus des chaînes de texte brut, le contenu de la réponse peut également utiliser json
Formater la chaîne.

Le plug-in fournit également un objet de paramétrage par défaut $.mockjaxSettings. Les paramètres qui ne sont pas spécifiés utiliseront ces valeurs par défaut :

$.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'
}
};

Copier après la connexion

Après avoir modifié la valeur par défaut, les requêtes de simulation suivantes utiliseront la valeur modifiée :

$.mockjaxSettings.contentType = "application/json";

Copier après la connexion

Seule la valeur par défaut de contentType est modifiée ici.

Ce qui précède explique les connaissances pertinentes du plug-in jQuery Mockjax pour simuler les requêtes Ajax à travers des exemples. J'espère que cela sera utile à tout le monde.