Of Stack

The jQuery Mockjax plug in simulates Ajax requests

  • 2020-11-30 08:10:12
  • OfStack

Principle 1.

jquery-mockjax is the return data requested by mock foreground ajax to the background.

The principle is simple

At the breakpoint 1 where your js code is sending the ajax request, then compare the value of $.ajax.toString () with [jquery-ES15en] and [jquery-ES17en] without.

Obviously, when jquery-ES23en is introduced, the mock library replaces the ajax functions provided by jquery. This makes it easy to get the mock up.

In the actual development process, the front and back end have negotiated the interface of Unified 1, and they start their own tasks. At this time, I have such an Ajax request that I need to get data from the background: 


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

But the service may not have been created yet, maybe the guy behind the scenes (the handsome guys who use PHP, Ruby,.NET, GoldFusion, etc.) has deserted, or maybe he's busy with something else. In short, I didn't get the result I wanted when this request was made, I only got a 404 (Not Found) error.

It was terrible, it didn't work, the testers were clamoring for tests, and I was eager to see immediate results. At this point, you have to rely on yourself, one of the better methods is to simulate Ajax requests, here I use the jQuery Mockjax plug-in.

Address: jQuery Mockjax

Here is an jQuery plug-in, download it and put it after jQuery when referring: 


<!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>

Then execute the mock request code before the request code and, using the $.mockjax () method provided by the plug-in, temporarily specify the two parameters url and responseText: 


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

It monitors Ajax requests with the same url and intercepts and simulates the response when the request is sent. The value of responseText is the simulated response so that my program can execute happily. The result of the original example is 'Here you are' which will be displayed in div#result. When I no longer need a mock request, I can use the $.mockjax.clear () method to clear:

$.mockjax.clear();

1 Once the background service development is complete, I can use this method to eliminate all mock requests to experience the real request effect. If you do not want to purge all mock requests once, but rather for a mock request, you can pass in ID for that mock request, and each mock request returns a value of ID: 


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

This clears out the second simulation request and keeps the first.

Since the Ajax request's url address is the same as the url request's address, it would be painful to assume that there are many requests on the page to simulate each one. Fortunately, the plug-in's url parameter provides a wildcard * mode: 


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

In addition to matching url /books/cook requests, you can also match /books/math and more, and you can even use regular expressions for more complex matching patterns: 


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

Using the plug-in's data parameter, you can perform different mock responses based on different request data: 


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

Even the same url address gets a different response when the requested data is different. In addition to plain text strings, json can also be used for response content
Formatted string.

The plug-in also provides a default parameter setting object, $.mockjaxSettings, which will be used for any parameters not specified: 


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

After the default value has been modified, subsequent mock requests will use the modified value: 


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

Only the default value of contentType has been changed here.

The above mentioned details of jQuery Mockjax plug-in simulation Ajax request knowledge through examples, I hope to help you.

Related articles: