cancel load page in javascript

Question

I define a link <a href="http://www.example.com">Hello</a>.when i click this link javascript should check the link is exist/valid.if true,the page should be load or the page should resirect to another page.i am using javascript ajax to check the page exist/not.i am using the condition xmlhttp.status == 200.But it is not working.here is the code:

function check(url){
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange=function(){

        if(xmlHttp.readyState==4){
            if (xmlHttp.status==200) 
            {
                alert("Page  Available");
            }
            else 
            {
                window.location.href= "http://www.hello.com";
            }
        }
    }

    xmlHttp.send(null);
}
</script>

</head>
<body>
<a href="http://www.example.com" onclick="check(this)">Click this Link</a>

here xmlHttp.status==200 is not working.can anyone help me?

Define "not working". It's an equality operator, I strongly suspect it's working correctly. Do you mean that the status isn't 200 when you expect it to be? Or that the comparison is never called? Or that there really is some problem with your JS engine's implementation? — Andrzej Doyle, Oct 13 '10 at 16:27
You can't make a cross domain request on the client-side. http://stackoverflow.com/questions/466737/why-is-cross-domain-ajax-a-security-concern — BrunoLM, Oct 13 '10 at 16:28
On a completely different note, if you're only interested in the status code of the request, you should make a `HEAD` request instead of a `GET`. Much lighter weight (i.e. quicker and cheaper and "better") and contains all the information you need. — Andrzej Doyle, Oct 13 '10 at 16:29
i tried head and it is not a problem of JS Engine.becaus i tried in different systems. — anish, Oct 13 '10 at 16:50

score 2 · Answer 1 · answered Oct 13 '10 at 16:34

Okay, multiple points:

onclick="check(this)" doesn't pass the URL to the check function but a reference to the the link object. So if you want to pass the URL, you have to reference the href attribute.
You shouldn't set window.location.href when you want to output something else afterwards. Setting the current location can make the browser change the page directly, so the alert probably won't change.
Why the if where you change the location to google each time?
You can only abort the processing of link click, by returning false in the event handler.
AJAX calls are, as the first parameter says, asynchronous. But as you abort the page loading already (by clicking on the link), the AJAX call gets aborted.
You can't return false from inside of the AJAX event handler (onreadystatechange) to stop the processing of the link. By the time you get there, the link is already processed.
That, what you are trying, is not really good. It should be up to the user to check if a page exists or not. It would be very wrong to redirect him to some other page (here: google) just because the link didn't work; at least I would be very confused. Also by checking that with AJAX, you make the user load the page twice, which is bad as well.

@anish: No, it passes a reference to the DOM element. It just equals to the URL when casted as string. Check with `typeof( url )` in the `check` function. — poke, Oct 13 '10 at 17:01

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

Browsers won't allow you to make a cross domain request.

See more details here, here and here.

edited May 23 '17 at 10:33

Community

1
1

answered Oct 13 '10 at 16:30

BrunoLM

97,872
84
296
452

mplungjan · Answer 3 · 2010-10-13T19:00:19.307

Has to be from the same domain or the domain has to use CORS for safari 4 and Fx 3.5+
you need to return false on the click
you need to use the url.href
you need to alert before you redirect

function check(link){ /* ONLY works from same domain OR if the target implemented CORS! */

    xmlHttp.open("GET", link.href, true);  

    xmlHttp.onreadystatechange=function(){

    if(xmlHttp.readyState==4){
        if (xmlHttp.status==200) 
        {
            alert("Page  Available");
        }
        else 
        {
            window.location.href= "http://www.hello.com";
        }
    }
}

xmlHttp.send(null);
return false; // imperative
}
</script>

</head>
<body>
<a href="http://www.example.com" onclick="return check(this)">Click this Link</a>

Finally got something posted that looks like code. SO was NOT happy and I indented and indented — mplungjan, Oct 13 '10 at 19:01

score 0 · Answer 4 · answered Oct 13 '10 at 16:32

0

Your onclick attribute should contain:

 check(this.href);

answered Oct 13 '10 at 16:32

andrewmu

14,276
4
39
37

but i get the url in a funtion.i checked with an alert – anish Oct 13 '10 at 16:48
You saw the URL printed, but that's because the `a` element's `toString()` method returns the URL, not because it *is* the URL – andrewmu Oct 13 '10 at 16:59

score 0 · Answer 5 · answered Oct 13 '10 at 16:37

You are not passing the url. You are passing the DOM element of the link. You need to use url.href or in jQuery you need to use $(this).attr('href').

Also the JavaScript is not preventing the link from being followed. You need to have the function return false, and have no errors before it does or you can use jQuery and event.preventDefault().

Finally even if you did all because of the same origin policy it will only work for links on the same domain you're on. Here is a link to a jQuery version of your code.

score 0 · Answer 6 · edited Nov 26 '13 at 12:07

Ok you are nearly there. A lot of useful comments so far. But it might be better to redirect from the server not from the client. I personally would pass parameter to a function on your server (your server script's url) (capturing the href using jQuery) to a function on your server, then use that passed url to do a (head) check and redirect them via the server if it exists. If the site doesn't exist, then don't redirect and just send JSON back to the client and let them know the site doesn't exist.

cancel load page in javascript

6 Answers6