Geek Answers Handbook

Checking url in jquery / javascript

All I need is a method that returns true if Url answers. Unfortunately, I'm new to jQuery, and that makes my attempts to write this method pretty frustrating.

I have seen some jQuery examples using .ajax, but the code constantly fails. What's wrong?

var urlExists = function(url){ //When I call the function, code is still executing here. $.ajax({ type: 'HEAD', url: url, success: function() { return true; }, error: function() { return false; } }); //But not here... }
+5
javascript jquery url
source share
6 answers

This is not how AJAX works. AJAX is fundamentally asynchronous (which actually means the first “A”), which means rather than calling the function and returning the value, you are calling the function and passing the callback, and that callback will be called with the value.

(see http://en.wikipedia.org/wiki/Continuation_passing_style .)

What do you want to do after you know if the URL is responding or not? If you intended to use this method as follows:

 //do stuff var exists = urlExists(url); //do more stuff based on the boolean value of exists

Then you need to do the following:

 //do stuff urlExists(url, function(exists){ //do more stuff based on the boolean value of exists });

where urlExists() :

 function urlExists(url, callback){ $.ajax({ type: 'HEAD', url: url, success: function(){ callback(true); }, error: function() { callback(false); } }); }
+20
source share

urlExists() cannot return because it needs to wait for the request.

Either pass it a callback, or make it synchronous (not recommended, since it blocks the browser).

 var urlExists = function(url, callback) { if ( ! $.isFunction(callback)) { throw Error('Not a valid callback'); } $.ajax({ type: 'HEAD', url: url, success: $.proxy(callback, this, true), error: $.proxy(callback, this, false) }); };

Then you can do

 urlExists('/something', function(success) { if (success) { alert('Yay!'); } else { alert('Oh no!'); } });

Also worth mentioning is the same origin policy .

Also, returning from the scope of an anonymous function does not return in the parent function (as in your original example). It just returns this internal function. To return from the inner parent, set the flag and return it.

+5
source share

Basically, there is nothing wrong with the code. See how it works: http://jsfiddle.net/PK76X/

I assume that you use it to check the availability of content in another domain, which fails because browsers do not allow cross-domain ajax requests.

+2
source share

If the URL is from the same domain as your page, you can do this. But if it is from another domain, for example google.com, it will fail due to cross-domain security.

+1
source share

In general, you should run the script in Firefox using the firebug plugin. He will provide you with the information necessary to solve the problem.

The ajax and post methods are asynchronous, so you must process the result with a callback method.

+1
source share

AJAX is basically asynchronous, and therefore the behavior you are describing. I used the following, which is not of cross origin, to get a simple true / false indication of whether the URL is valid, synchronously:

 function isValidURL(url) { var encodedURL = encodeURIComponent(url); var isValid = false; $.ajax({ url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22" + encodedURL + "%22&format=json", type: "get", async: false, dataType: "json", success: function(data) { isValid = data.query.results != null; }, error: function(){ isValid = false; } }); return isValid; }

Usage is then trivial:

 var isValid = isValidURL("http://www.wix.com"); alert(isValid ? "Valid URL!!!" : "Damn...");

Hope this helps

-one
source share

More articles:


All Articles