Examples of jquery Mockjax plug-in simulation Ajax request _jquery

1. Principle

Jquery-mockjax is the return data used to mock foreground Ajax back-desk requests.

The principle is simple.

In your JS code to send the AJAX request place breakpoint, and then compare the "introduce Jquery-mockjax" and "did not introduce Jquery-mockjax" in the Case of $.ajax.tostring () the value of the situation.

Obviously, when Jquery-mockjax is introduced, the mock library replaces the AJAX functions provided by jquery. So it's easy to mock up.

In the actual development process, the front-end backstage negotiated a unified interface, they began their own task. That's when I have an Ajax request to get the data from the background:

$.ajax ({
URL: '/products/'
}). Done (function (res) {
$ (' #result '). HTML (res);

But the service may not have been created, maybe it was backstage development the lad (the handsome man who used PHP, Ruby,. NET, goldfusion, etc.) deserted, maybe he was busy with other things. In short, when this request is issued I cannot get the result I want, I can only get a 404 (not Found) error.

This is really bad, urging also no use, next to the tester noisy to test it, and I am eager to see the immediate effect. This time, can only rely on their own, one of the better way is to simulate the Ajax request, here I use the JQuery mockjax plug-ins.

Address: JQuery Mockjax

This is a jquery plugin that downloads the reference to the time after jquery:

<! DOCTYPE html>
 
 

Then execute the code that simulates the request before the code is requested, using the $.mockjax () method provided by the plug-in, to temporarily specify 2 parameter URLs and responsetext:

$.mockjax ({
URL: '/products/',
responsetext: ' Here you are! '

It will monitor Ajax requests with the same URL and intercept and simulate the response at the time of the request, ResponseText's value is the simulated response content, so my program can be happily executed, the first example of the operation result is ' Here you are ' this section will show In Div#result. When I no longer need a mock request, I can use the $.mockjax.clear () method to clear it out:

$.mockjax.clear ();

Once the background service development is complete, I can use this method to erase all mock requests to experience the actual request effect. If you do not want to clear all of the impersonation requests at once, but for a mock request, you can pass in the ID of the impersonation request, and each mock request returns an ID value:

var Idone = $.mockjax ({}),
idtwo = $.mockjax ({});

This removes the second mock request and retains the first one.

Since the URL address of the AJAX request corresponds to the URL of the mock request, it is painful to assume that there are many requests on the page and each request is simulated, but the URL parameter of the plugin provides a wildcard * mode:

$.mockjax ({
URL: '/books/* '

This way, in addition to matching URLs with/books/cook requests, you can also match addresses to/books/math and more requests, and even use regular expressions for more complex matching patterns:

$.mockjax ({
URL:/^\/data\/(cook|math) $/i

Use the data parameter of the plug-in to perform different simulated 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": " Want a math book! "
}

Even the same URL address when the requested data is different, the response content is not the same. In addition to plain text strings, the response content can also be used with JSON
The format of the string.

The plug-in also provides a default parameter setting object $.mockjaxsettings, which will use these defaults if no parameters are 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 is modified, subsequent impersonation requests use the modified value:

Only the default values for the ContentType are modified here.

The above example illustrates the knowledge of the jquery Mockjax plug-in to simulate the Ajax request through an instance, hoping to be helpful to everyone.