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.

hema sundar Ginni · Accepted Answer · 2019-11-28 05:39:38Z

2

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();
    }
})

answered Nov 28, 2019 at 5:39

hema sundar Ginni

3233 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Celsiuss · Accepted Answer · 2019-11-28 05:19:30Z

1

When doing an AJAX call, you're in complete control of the request. But when you click a link that goes to another URL entirely, there is not much you can do. You might want to look into the beforeunload event. With that event, you can cancel it in order to show a popup dialog asking if the user wants to navigate away or not.

answered Nov 28, 2019 at 5:19

Celsiuss

9057 silver badges19 bronze badges

Comments

Shirish Maharjan · Accepted Answer · 2019-12-05 21:10:16Z

1

you add custome attribute to the a tags that you want to intercept (eg: data-intercept)

<a href="\\google.com" data-intercept="true">google</a>

Jquery

 $(document).on('click','a[data-intercept="true"]',function(e){e.preventDefault(); alert();});

jquery will only intercept the a tag clicks that has attribute data-intercept ="true"

answered Dec 5, 2019 at 21:10

Shirish Maharjan

5025 silver badges17 bronze badges

Comments

Chibueze Opata · Accepted Answer · 2019-12-07 13:31:12Z

1

Basically, you have to either watch for a click event (preferably) on the link or monitor for unload event. A user clicking a html link has nothing to do with AJAX or Jquery except for the clicking part which is a DOM event. If you decide to use beforeunload, you have to return an undefined value to prevent a prompt.

window.onbeforeunload = function() {
    //do stuff
    return undefined;
}

answered Dec 7, 2019 at 13:31

Chibueze Opata

10.1k8 gold badges47 silver badges71 bronze badges

Collectives™ on Stack Overflow

Intercepting any request - javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related