For details about the second-encapsulated jquery ajax method example, jqueryajax

For details about the second-encapsulated jquery ajax method example, jqueryajax

Preface

The full name of Ajax is Asynchronous JavaScript and XML Asynchronous javaScript and XML

Technologies involved in AJax:

1. CSS and XHTML are used for representation.

2. Use the DOM model for interaction and dynamic display.

3. Use XMLHttpRequest to communicate with the server asynchronously. (CORE)

4. Use javascript for binding and calling.

Ajax can communicate with the backend when processing data at the front end. ajax communicates with the server through the XMLHttpRequest object. jquery encapsulates the XMLHttpReaquest$.ajaxMethods for communication,$.ajaxThe method is very practical and easy to use. In this second encapsulation of query ajax, you can refer to express to add middleware to process data and return the Promise (Defferd) object to reduce callback, making ajax more concise and elegant.

$.ajax({ url: url, data: data, dataType: 'json', type: 'get', success: new Function(){}, error: new Function(){}, .......})

Most of the time, we only need to input url and data to get the data we think.

Pain points

However$.ajaxIt still has some pain points

Now, the data returned by ajax for all projects is encapsulated twice and added to the background information for processing the business logic.

From the returned data｛code: 200, data:{}, err_msg:''｝

If every ajax request comes back, you need to determine whether the code is correct and then handle the business logic or report an error reminder. The entire project is too redundant,

$.ajax({ url: url, data: data, success: function(data){ if(data.code == 200) {  dosomething() } else { alert(data.err_msg); } }})

To solve this problem, we use a function to encapsulate it again.$.ajax, Extract the correct or not judgment and then process the business logic or Error Notification to make it a public part.

util.ajax = function(obj, successFn){ $.ajax({ url: obj.url || '/interface', data: obj.data || {}, dataType: obj.dataType || 'json', type: obj.type || 'get', success: function(data){  if (data.code != 200) {  alert(data.err_msg);  } else {  successFn(data.data)  } }, error: function(err){  alert(err) } })}

Promise

Useutil.ajaxReplace$.ajaxThis can reduce the judgment of service errors. Let's further improve the method of calling without using the callback method, and use the promise method to reduce the callback and make the code clearer.

Util. ajax = function (obj) {var deferred = $. deferred (); $. ajax ({url: obj. url | '/interface', data: obj. data | {}, dataType: obj. dataType | 'json', type: obj. type | 'get ',}). success (function (data) {if (data. code! = 200) {deferred. reject (data. err_msg);} else {deferred. resolve (data. data )}}). error (function (err) {deferred. reject ('interface error, Please retry ');}) return deferred. fail (function (err) {alert (err)});} // call var obj = {url: '/interface', data: {interface_name: 'name', interface_params: JSON. stringify ({}) }}; util. ajax (obj ). done (function (data) {dosomething (data )})

Middleware

This is a public solution, but sometimes we need to handle the difference. We refer to express to introduce a middleware to solve the difference problem.

Util. ajax = function (obj, middleware) {var deferred = $. deferred (); $. ajax ({url: obj. url | '/interface', data: obj. data | {}, dataType: obj. dataType | 'json', type: obj. type | 'get ',}). success (function (data) {if (data. code! = 200) {deferred. reject (data. err_msg);} else {deferred. resolve (data. data )}}). error (function (err) {deferred. reject ('interface error, Please retry ');}) // Add middleware if (! Middleware) {middleware = function () {};} return deferred. done (middleware ). fail (function (err) {message ({content: err, type: 'error', showLeftIcon: true, duration: 5000 });});} // call var obj = {url: '/interface', data: {interface_name: 'name', interface_params: JSON. stringify ({}) }}; var middleware = function (data) {data. forEach (function (item) {item. fullName = item. firstName + item. lastName})} util. ajax (obj, middleware ). done (function (data) {console. log (data. fullName )})

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.