Frontend Development 19 min read

AOP Techniques for Ajax and Jsonp in Front-End Development

The article explains how to use Aspect‑Oriented Programming to globally intercept and rewrite Ajax and JSONP requests—both native and framework based—by extending Function.prototype, overriding DOM methods, and employing ajax‑hook and Axios interceptors, culminating in a runnable demo that redirects traffic from a‑domain to b‑domain.

37 Interactive Technology Team
37 Interactive Technology Team
37 Interactive Technology Team
AOP Techniques for Ajax and Jsonp in Front-End Development

native-ajax-btn

jquery-ajax-btn

native-jsonp-btn

jquery-jsonp-btn

// (All the functions and AOP code shown above are placed here) $('#native-ajax-btn').click(function(){ myAjax('https://a-domain.37games.com/activity/execute'); }); $('#jquery-ajax-btn').click(function(){ $.post('https://a-domain.37games.com/activity/execute',{name:'christmas2021',action:'check_time'}).done(function(r){ alert(r.msg); }); }); $('#native-jsonp-btn').click(function(){ myJsonp({url:'https://a-domain.37games.com/activity/execute',jsonp:'callback',data:{name:'christmas2021',action:'check_time'},success:function(r){ console.log('jsonp success:',r); }}); }); $('#jquery-jsonp-btn').click(function(){ $.ajax({url:'https://a-domain.37games.com/activity/execute',data:{name:'christmas2021',action:'check_time'},jsonp:'callback',dataType:'jsonp',success:function(r){ alert(r.msg); }}); });

frontendJavaScriptAOPAxiosHookAJAXJSONP
37 Interactive Technology Team
Written by

37 Interactive Technology Team

37 Interactive Technology Center

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.