•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,531 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,326 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 4682 | Replies: 5 | Solved
 |
•
•
Join Date: Dec 2007
Posts: 3
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Ajax javascript test if image file exists 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:
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:
last part of main function call:
// collapse imagelink array removing missing elements //
for (m=imagetotl-1;m>=3;m--) {
testExists(imagelink[m]);
alert("test"); //this statement that must be here to make it work! (What gives???) //
if(nB) {
imagetotl--;
for (n=m;n<=imagetotl+1;n++) {
imagelink[n]=imagelink[n+1];
}
}
}
// Seed the starting image sequence //
document.pic.src=imagelink[0];
break;
}
}
}
}
function testExists(imagepath) {
req = getreq();
req.onreadystatechange = imagexists;
req.open("head", imagepath, true);
req.send(null);
}
function imagexists() {
if(req.readyState == 4) {
if(req.status == 200)
{
// image exists
nB=false;
}
else
{
// image doesn't exist
nB=true;
}
}
}
function getreq() { // returns false if exists
if(window.ActiveXObject) { // if IE
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return;
}
}
} else if(window.XMLHttpRequest) { // if Mozilla, Safari, etc.
return new XMLHttpRequest();
}
}
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
For the sake of debugging, change this:
req.open("head", imagepath, true);
to this:
req.open("HEAD", imagepath, false);
req.open("head", imagepath, true);
to this:
req.open("HEAD", imagepath, false);
•
•
Join Date: Dec 2007
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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:
One last thing, if IE keeps giving you trouble, try
req.send('');
instead of req.send(null);
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:
function imagexists(){
if(req.readyState == 4) {
if(req.status == 200)
{
// image exists
nB=false;
}
else if(req.status==404)
{// image doesn't exist
nB=true;
}
else
{
// all other error codes will set this
nB=null;
}
retur nB;
}
}One last thing, if IE keeps giving you trouble, try
req.send('');
instead of req.send(null);
•
•
Join Date: Dec 2007
Posts: 3
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
>>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.
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.
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
ajax asp cross-browser javascript menu with few lines of code developer development firefox home html internet javascript javascript smooth scrolling scroll smoothly window document position javascript tab menu with rounded corners generator microsoft msdn office prevent javascript menu from getting hidden under flash movies site software sql unit test vista vsts web
- Previous Thread: Javascript gives error on localhost
- Next Thread: path to file, from javascript
