Question posted in
You can find the official documentation here.

Jquery ajax – Intercepting any request – javascript

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.

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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();
    }
})
    Login or Signup to reply.
  3. 0

    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”

    Login or Signup to reply.
  4. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search