Intercepting any request - javascript

Question

I have a web page say - sample-page.html with 2 links in it -

sample-page.html
- link1 (GET, ajax)
- link 2 (GET, new page)

When I click link1 an ajax GET request is executed and it still stays at the sample-page.html.When I click link2 another get request is executed and a new page sample-page2 will appear.

To intercept both requests I've written a javascript code like this -

    //attempt-1 : javascript
    (function (send) {

        XMLHttpRequest.prototype.send = function () {
            this.setRequestHeader('some-header-param', 'some-value');
            send.apply(this, arguments);
        };

    })(XMLHttpRequest.prototype.send);

    //attempt-2: jquery 
    /*$.ajaxSetup({
        beforeSend: function (xhr,settings) {
           xhr.setRequestHeader('some-header', 'some-header-value');
       }
      }); */

The above, both attempts successfully able to intercept the ajax GET request from link1. But neither of the above code snippets can't able to intercept the request from link2. Can anyone help how to intercept both requests?

Thanks in advance.

Answer 1

You can do that by using javascript event.preventDefault() functionality. Write a event listener for onclick on that element. Do whatever functionality you want and call event.preventDefault() if you want stop sending the request otherwise leave it as it is.

<a id='some_id'>click here</a>

document.getElementById('some_id').addEventListener('click',function(event){
    //do whatever you want.
    //If you want to stop the request.
    if(need_to_stop){
        event.preventDefault();
    }
})