Post/Get handler in Jquery/Javascript - javascript

I am doing a web application,
which creates a lot of post & get requests.
I can see all the requests using Develop Tools in Mozilla/Chrome, and also in Charles (application).
Is it possible to create a jquery/javascript function which will listen for all requests on current page, and will alert each request to me?
Something similiar to Jquery .click() function.
example:
$('body').post(function() {
alert(this.Url + this.Parameters);
});
I googled, and couldn't find, hope there is a way.

Yes,in Jquery you have Global Ajax Event Handlers
These methods register handlers to be called when certain events, such
as initialization or completion, take place for any Ajax request on
the page
refer the Documentation

Related

ASP.NET How to reuse jQuery event handlers across more than one cshtml file

I have this method for adding a global event handler, so I can check on each ajax request whether a response header has been added and how to respond to that.
This works absolutely fine, but I need it in more than one view (cshtml). So rather than duplicating it in every file, is there a way I could extract this out so I can call it from other files or apply this globally to all my views?
$(document).ajaxSuccess(function(event, request, settings) {
if (request.getResponseHeader('ResponseHeader') === '1') {
window.location.href = '#Url.Action("Action", "Controller")';
}
});
The code itself isn't super important, just more about whether it's possible to reuse these across all my views without duplicating it. I was also thinking about creating a global event handler that would check the http status code response from all ajax requests, then respond to the codes appropriately i.e. redirect any 404 codes to a not found page for example. There must be a way to achieve this or something similar rather than copying this across every single ajax call?
The main language I use is C# and I'm a beginner with using JavaScript / jQuery, so any extra explanations would be greatly appreciated.
Thanks!
jQuery version: 1.10.2

JavaScript Ajax LIstener

I am looking for a listener to receive ajax events before any Ajax method is invoked.
I see there is an ajaxLIstsner in JQuery which would work if all my ajax requests were coming from JQuery. But there are not. So, question is how would I implement such a listener in core JavaScript.
Thanks.
You can override the xhr prototype, see http://oreilly.com/pub/h/4133

How to parse an html table after being constucted by an ajax request without using done method

In my situation there is no way I can add code to done statement after the ajax call has finished. So I need some way to parse a table after an ajax request is finished.
Is there any way I can listen to the dom, so when a control is constructed or added on the page, to execute some other code?
Is there something like this?
$("#table_id").live('load', function(){
..
});
Thank you
Is there any way I can listen to the dom
There are mutation events but these are inconsistently supported across browsers and generally not recommended.
How about a simple .ajaxComplete()-provided complete handler for all ajax requests? That seems to be pretty close to your code example:
$("#table_id").ajaxComplete(function () {
// ...
});

Track Ajax requests on a page

I have a web page and I am associating a note with the page storing it in my database, so that the whenever the next time the page is loaded that notice can been seen till it is deleted by some other user authorized to do the same. However, say I associate a note with the page after some content is loaded through AJAX. I want the note to appear only after that particular content has loaded next time on the web page. I would like to track the AJAX request and attach the note to it? I want to do it all through simple JavaScript code put at the bottom of any web page. How can it be done?
jQuery ajax provides methods to fire events before, during and after the ajax request. Please check the api here for complete list.
Here are couple of methods that are called after completion of every ajax request.
jQuery.ajaxComplete() - Register a handler to be called when Ajax requests complete.
jQuery.ajaxSuccess() - Show a message when an Ajax request completes successfully
These functions allows you to pass a callback function to trigger after event occurs. In that call back function check if content you want is loaded or not, then show the note.
Sample code for the above methods can be found here:
http://api.jquery.com/ajaxComplete/
http://api.jquery.com/category/ajax/
Hope this helps.
You'd need to write a wrapper for all of your ajax calls that checks the result and sees if it should add a note. Here's an example, assuming you're using jQuery to handle the ajax requests:
function ajaxWrapper(settings){
var old_callback = settings.complete;
settings.complete = function(request, status){
if(status == "200"){
// check the request.responseText and add your note if appropriate
}
if(old_callback){
old_callback(request, status);
}
}
jQuery.ajax(settings);
}
And then instead of calling jQuery.ajax() directly, call ajaxWrapper() instead.
An alternate option would be to include the note in your ajax response.

Intercepting XHRs

Is it possible to intercept when the browser does a XHR?
Regardless of JavaScript libraries used?
Like
setTimeout(function() {
// jQuery XHT
$('#container').load('foo.html');
}, 5000);
When the jQuery.load fires, I want to intercept this and add an url parameter to the request.
Thanks in advance for tips and info.
Best regards
tan
Not possible for all frameworks no, you'll have to do it on a per framework basis as they all build them differently. If this was only to be used by your own code then there is nothing stopping you writting a wrapper for you XHR calls which could tag the additional data on the end.
What is it you are wanting to send? A cache breaker? Tracking? Also why for all frameworks?
Also if you want to just debug the requests you can use Firebug in Firefox to see all XHR requests that get sent.
Well each JQuery ajax methods return an XHR (except for load), so you could set your own onreadystatechange if you wanted to.
Yes you can - http://github.com/jpillora/xhook - implements a wrapper over XMLHttpRequest2 allowing you to change view and modify a request before it is made and after it is returned

Categories

Resources