Ajax javascript test if image file exists

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

Join Date: Dec 2007
Posts: 3
Reputation: strangeplant is an unknown quantity at this point 
Solved Threads: 0
strangeplant strangeplant is offline Offline
Newbie Poster

Ajax javascript test if image file exists

 
0
  #1
Dec 10th, 2007
Hi All, I need the help of a real expert because I'm still having difficulty with this Ajax technique. I have posted before about this on another site forum, but no replies (sigh). The script below works with FF only when the alert is in the code, and doesn't work at all in IE. Of the numerous posts on the net about doing this, none seem to work at all. I believe that the IE portion of the problem has to do with the req.readyState or req.status, maybe. But in FF, why is the alert necessary for the req.readystatechange to work? Or, what else is the alert doing that I need to do? Something about clearing an error of trying to get a file header that doesn't exist? Oh, by the way, if I just go ahead and don't do anything at all, then it displays all of the existing links fine and just inserts 'X' for missing images when they don't exist, which is roughly 60% of the time, so that's not an acceptable approach, specially if the first several are the missing ones.

The html page is delivered from a php page at the end of a series of php login and verification pages, but I've tested this as a standalone - same thing. The image links are retrieved from an array, and there is absolutely no problem there - only in testing if the file exists so the array can be collapsed before going into the display routines. nB is declared as a global variable, btw. My code is this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. last part of main function call:
  2. // collapse imagelink array removing missing elements //
  3. for (m=imagetotl-1;m>=3;m--) {
  4. testExists(imagelink[m]);
  5. alert("test"); //this statement that must be here to make it work! (What gives???) //
  6. if(nB) {
  7. imagetotl--;
  8. for (n=m;n<=imagetotl+1;n++) {
  9. imagelink[n]=imagelink[n+1];
  10. }
  11. }
  12. }
  13. // Seed the starting image sequence //
  14. document.pic.src=imagelink[0];
  15. break;
  16. }
  17. }
  18. }
  19. }
  20.  
  21. function testExists(imagepath) {
  22. req = getreq();
  23. req.onreadystatechange = imagexists;
  24. req.open("head", imagepath, true);
  25. req.send(null);
  26. }
  27.  
  28. function imagexists() {
  29. if(req.readyState == 4) {
  30. if(req.status == 200)
  31. {
  32. // image exists
  33. nB=false;
  34. }
  35. else
  36. {
  37. // image doesn't exist
  38. nB=true;
  39. }
  40. }
  41. }
  42.  
  43. function getreq() { // returns false if exists
  44. if(window.ActiveXObject) { // if IE
  45. try {
  46. return new ActiveXObject("Msxml2.XMLHTTP");
  47. } catch(e) {
  48. try {
  49. return new ActiveXObject("Microsoft.XMLHTTP");
  50. } catch(e) {
  51. return;
  52. }
  53. }
  54. } else if(window.XMLHttpRequest) { // if Mozilla, Safari, etc.
  55. return new XMLHttpRequest();
  56. }
  57. }
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 113
Reputation: hielo is on a distinguished road 
Solved Threads: 17
hielo hielo is offline Offline
Junior Poster

Re: Ajax javascript test if image file exists

 
0
  #2
Dec 10th, 2007
For the sake of debugging, change this:
req.open("head", imagepath, true);

to this:
req.open("HEAD", imagepath, false);
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 3
Reputation: strangeplant is an unknown quantity at this point 
Solved Threads: 0
strangeplant strangeplant is offline Offline
Newbie Poster

Re: Ajax javascript test if image file exists

 
0
  #3
Dec 10th, 2007
I haven't done that (and I will tomorrow when I get to work), but I use firebug to look at the javascript and to see what is happening with the file finds - and in 42ms (ave) the 'not found' header is returned, the array collapses appropriately - HOWEVER, WITHOUT THE ALERT MESSAGE, the boolean is not evaluated correctly in function imagexists(), some problem with the readystatechange property, and I think (maybe) javascript is throwing some sort (unreported) error since the file header doesn't exist. So, the alert message is doing something that I need to do, only I don't know what it is doing behind the scenes.... Any ideas? I can't believe that I'm the only one who is trying to do this sort of thing. I just gotta take the ALERT message out. Getting it to work in IE is still an issue.
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 113
Reputation: hielo is on a distinguished road 
Solved Threads: 17
hielo hielo is offline Offline
Junior Poster

Re: Ajax javascript test if image file exists

 
0
  #4
Dec 11th, 2007
The real problem here is that you are calling the ajax request asynchronously. That's what the third parameter to req.open means.
true == asynchronous
false = synchronous

What that means is that when the script executes this:
req.send(null);

The javascript interpreter does not wait for the response. It continues executing your script.
Stop and think for a second. If the server takes 2 seconds to reply, but your javascript intepreter goes immediately to the next statement, then nB will not reflect the response from the server. That's why you need it to be synchronously. Basically, you are forcing the interpreter to pause until it gets a response.

The readystatechange and the readyState==4 are perfectly fine. To know if the error file does not exist you need to check for
req.status==404

200 means the files exists, but if it NOT 200, it does not necessarily mean it does not exist. For example
403 means you don't have permission to download the image/file, but it exists.

Also, ideally, your function imagexists() should return a value as shown below:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function imagexists(){
  2. if(req.readyState == 4) {
  3. if(req.status == 200)
  4. {
  5. // image exists
  6. nB=false;
  7. }
  8. else if(req.status==404)
  9. {// image doesn't exist
  10. nB=true;
  11. }
  12. else
  13. {
  14. // all other error codes will set this
  15. nB=null;
  16. }
  17. retur nB;
  18. }
  19. }

One last thing, if IE keeps giving you trouble, try
req.send('');

instead of req.send(null);
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 3
Reputation: strangeplant is an unknown quantity at this point 
Solved Threads: 0
strangeplant strangeplant is offline Offline
Newbie Poster

Re: Ajax javascript test if image file exists

 
0
  #5
Dec 12th, 2007
Many thanks, hielo, for your suggestion and clarification - you were exactly right about the synchronous (false) call. It now works perfectly.

But about the nb == null; well - there are only two possibilities in my case, file does/doesn't exist. If it exists then it can be retrieved.

I'm in debt to you for pointing this out to me.
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 113
Reputation: hielo is on a distinguished road 
Solved Threads: 17
hielo hielo is offline Offline
Junior Poster

Re: Ajax javascript test if image file exists

 
0
  #6
Dec 12th, 2007
>>there are only two possibilities in my case
This is OK, but you could rename:
function imagexists
to something more generic like:
function fileIsAvailable

and be able to reuse the function on other projects. 200 => true: Server is willing to give you the file. 404 => false: File truly does not exist.
anything else => null: You (the developer) need to look into this matter (Permission problem?, redirecting resource?,internal server error?)

Just a suggestion.
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC