Modular Management of Ajax

The Web front end uses Ajax to call back the data of the background interface, when the project is larger and the interface is relatively long, scattered Ajax calls make the project look very messy, and the chances of repeated calls are high.

So I recommend that you work with Ajax in a unified package, the interface is unified management.

First, the basic method of encapsulating Ajax in top-level JS.

varAjaxdatacontroller =function () {    //Print Ajax error logs    functionprintlog (result, URL, params, response) {Console.error (' AJAX Request exception-%s\n error message: \n%c%s\n%c Request Link:%s\n%c request parameter:%c%s\n%c return data:%c%s ',            ' Color:red; ', result,' Color: #333; ',            ' Color:blue ', URLs,' Color: #333; ',            ' Color:green ', json.stringify (params),' Color: #333; ',            ' Color: #643A3A ', Response)} functiondatahandle (URL, params, callback, Async, method) {if(!method) {            Throw' Method parameter not set '        }        if((typeofparams) = = = ' function ') {Callback=params params=NULL} params= Params | | {}; Params= $.extend ({date:NewDate (). GetTime (). toString ()}, params); Async= Async = =NULL?true: Async; varError_process_mode = 0; if(typeof(params. Error_process_mode)! = "undefined") {            if(params. Error_process_mode==1) {Error_process_mode= 1; Try {                    Deleteparams.                Error_process_mode; } Catch(e) {}}} $.ajax ({async:async, url: URL, DataType:' JSON ', Data:params, Type:method, success:function(result, Textstatus, XHR) {if(Result.success = = =false) {printlog (result, URL, params, xhr.responsetext)}Switch(result.status) { Case200: Callback (Result);  Break;  Case400:                        if(window.parent) {alert (result.errormessage); } Else{alert (result.errormessage); }                         Break;  Case511:                        //not logged incallback (result);  Break;  Case512:                        if(error_process_mode!=1) {                            if(window.parent) {alert (result.errormessage); } Else{alert (result.errormessage);                        }} callback (result);  Break;  Case513: Callback (Result);  Break; default:                        //Console.log (typeof Xhr.responsetext);                        if(Xhr.responseText.indexOf ("<! DOCTYPE html> ")!=-1) {result={status:511,errormessage: "Login timeout, please login again", Resultobject:NULL};                            Callback (result);  Break; }                        if(window.parent) {alert ("The system is abnormal, please try again later"); } Else{alert ("The system is abnormal, please try again later");                        } callback (result);  Break; }}, Error:function(XHR, Textstatus, error) {if(window.parent) {alert ("The system is abnormal, please try again later"); } Else{alert ("The system is abnormal, please try again later"); } printlog (Xhr.status, Textstatus+ '-' +error, URL, params, xhr.responsetext);    }        }); }    return{post:function(URL, params, callback, async) {datahandle (URL, params, callback, async,' Post '); }, put:function(URL, params, callback, async) {datahandle (URL, params, callback, async,' Put '); }, Del:function(URL, params, callback, async) {datahandle (URL, params, callback, async,' Delete '); }, get:function(URL, params, callback, async) {datahandle (URL, params, callback, async,' Get '); }    };};

Then, add a collection of interfaces that are available for invocation in the module.

1 varMycontroller = {2 _ajaxhander:ajaxdatacontroller (),3 _url: {4         //all the interface addresses5Post_report1: '/report/report1 ',6 7Post_report2: '/report/report2 ',8 9POST_REPORT3: '/report/report3 'Ten     }, One  AReport1:function(Params,callback, async) { -  -          This. _ajaxhander.post ( This. _url. Post_report1, params,function(data) { the callback (data); - }, async); -     }, -  +Report2:function(Params,callback, async) { -  +          This. _ajaxhander.post ( This. _url. Post_report2, params,function(data) { A callback (data); at }, async); -     }, -  -REPORT3:function(Params,callback, async) { -  -          This. _ajaxhander.post ( This. _url. POST_REPORT3, params,function(data) { in callback (data); - }, async); to     } +      - } the     

Finally, we can call the corresponding interface directly.

1     functionLoadReport1 (params) {2Mycontroller.report1 (params,function(data) {3             if(Data.status = = 511) {4             5             }6             if(data.status==200 && data.resultobject!=NULL){7             8}Else {9             Ten             } One         }); A}

　　

Modular Management of Ajax