Ajax doesn't work when I run few AJAX events

[al9]

Hello guys,

I'm using simple AJAX function on my site and it works fine until I run it few times during 1-2 seconds. Then it's just stops working.

I wonder why does it happen and how can I fix it?

Ajax code is here:

var AJAX = null;
if (window.XMLHttpRequest) {
    AJAX=new XMLHttpRequest();
}else{
    AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX.onreadystatechange = function() {
if (AJAX.readyState==4 || AJAX.readyState=="complete"){
    showAjax(AJAX.responseText, AJAX.status);
}
}

function showAjax(ajaxData, serverStatus) {
	document.getElementById(someDiv).innerHTML = ajaxData;
}

[gimbles]

what about it stops functioning, are you clicking it too many times before it has finished loading?

[al9]

what about it stops functioning, are you clicking it too many times before it has finished loading?

Something like this. Actually this function is called when I put mouse cursor over one of 20-30 small images (each image has it's own id, which is sending to server).

So, when I put cursor over 3-4 images during 1 second, for example, Ajax function doesn't work work.

[al9]

Any idea how to fix it guys?

[wonshikee]

Try creating an ajax object per request, its most likely due to ajax response conflicting with the next ajax request since mostly likely you have one ajax object.

[al9]

Try creating an ajax object per request, its most likely due to ajax response conflicting with the next ajax request since mostly likely you have one ajax object.

How can I do it? I'm sorry for maybe stupid questions, but I don't know how can I do it.

[wonshikee]

You could do something like this

<script>
var ajaxObj = new Array();
var ajaxCount = 0;
function ajaxFunc()
{
    var ajaxObj[ajaxCount] = new XMLHttpRequest();
    ajaxCount++;
    // and so on..



}
</script>

So the idea is to store it in an array, and each time one is created you raise the index, but make sure that the request goes out with the right index.

Also AJAX.onreadystatechange = function() {
if (AJAX.readyState==4 || AJAX.readyState=="complete"){
showAjax(AJAX.responseText, AJAX.status);
}

should be something like

ajaxObj[(ajaxCount-1)].onreadystatechange = function() {
if (this.readyState==4 || this.readyState=="complete"){
showAjax(this.responseText, this.status);
}

Not sure if this will work like this, but i have no time to test it but i'm sure a javascript guru could help you out if this doesn't get you pointed in the right direction.

Also note that there is GC, so this would eventually stink up your computer if you don't clean it out.

[al9]

Thanks for idea. I tried i, but it doesn't work.

The Firebug shows this errors when I put mouse cursor over few images during 1-2 seconds:

[Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIXMLHttpRequest.send]" nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no]
mc(mouseout clientX=0, clientY=0, div#map)main.js (line 240)
ne(mouseout clientX=0, clientY=0)main.js (line 540)
iv(mouseout clientX=0, clientY=0)

My code looks like this now:

var AJAXphoto = Array();

function sendAjaxPhoto (photoId, photo_big){
var url='http://www.site.com/ajaxShowPhoto.php?photoId=' + photoId + '&photoBig=' + photo_big;
AJAXphoto[photoId].open("GET", url, true);
AJAXphoto[photoId].send(null);
}

function showPhoto (ajaxData, serverStatus){
photoWindow = document.getElementById("infoWindow");
photoWindow.innerHTML = ajaxData;
}

big function that creates images(....){

....

if (window.XMLHttpRequest) {
AJAXphoto[photoId] = new XMLHttpRequest();
}else{
AJAXphoto[photoId] = new ActiveXObject("Microsoft.XMLHTTP");
}

AJAXphoto[photoId].onreadystatechange = function() {
if (this.readyState==4 || this.readyState=="complete"){
showPhoto(this.responseText, this.status);
}
}

....

event.addListener(image, "mouseover", function() {
sendAjaxPhoto(photoId, photo_big);
}

....

}

But it doesn't work. Can you look into it please. Maybe I made some error here.

[al9]

Anyone? I'd really like to make this function work.

[jimfraser]

This part is what creates the object:

if (window.XMLHttpRequest) {
AJAXphoto[photoId] = new XMLHttpRequest();
}else{
AJAXphoto[photoId] = new ActiveXObject("Microsoft.XMLHTTP");
}

I'd stick that at the beginning of your sendAjaxPhoto function

[al9]

This part is what creates the object:

if (window.XMLHttpRequest) {
AJAXphoto[photoId] = new XMLHttpRequest();
}else{
AJAXphoto[photoId] = new ActiveXObject("Microsoft.XMLHTTP");
}

I'd stick that at the beginning of your sendAjaxPhoto function

Thanks Jim.

I've tried this, but I get error in Firebug:

AJAXphoto[photoId] has no properties
[Break on this error] AJAXphoto[photoId].onreadystatechange = function() {

I think it's because when script calls sendAjaxPhoto, AJAXphoto object wasn't created yet.

My big function that creates images (look at quote in my previous message please) is creates image with AJAXphoto object and mouseover event that calls sendAjaxPhoto() function.

[jimfraser]

You're loading an image with AJAX? Or are you loading image details (title, description). Because you can load images asynchronously without ajax just by creating an <img> tag and setting the .src property to the url of your image.

[al9]

You're loading an image with AJAX? Or are you loading image details (title, description). Because you can load images asynchronously without ajax just by creating an <img> tag and setting the .src property to the url of your image.

No Jim, I'm running PHP script which checks something in MySQL, preparing image and sends photo id back to JS.

I've fixed biggest bug in the script above by changing "this" to full object name.

But I still get errors like I described above when I do mouseover few times per second. Should I ignore them?

And also I have problem when I do mouseover for one image twice per second. Script doesn't work when I do it. But when I do mouseover for like 7 different images, script works. It's strange and I can't understand why does it happen. Do you have any idea?

[jimfraser]

It's probably because you mouseover an image and it creates the object
AJAXphoto[photoId]

When you mouseover again, it tries to use that object to resend an ajax request, and perhaps the first one hasn't finished yet.

You could check it first:

function sendAjaxPhoto(photoId, photo_big) {
  if (!AJAXPhoto(photoId)) {
    // create and dispatch ajax object
  }
}

[al9]

It's probably because you mouseover an image and it creates the object
AJAXphoto[photoId]

When you mouseover again, it tries to use that object to resend an ajax request, and perhaps the first one hasn't finished yet.

You could check it first:

function sendAjaxPhoto(photoId, photo_big) {
  if (!AJAXPhoto(photoId)) {
    // create and dispatch ajax object
  }
}

Thanks for the idea Jim. You're the best.

I've added this line into my sendAjaxPhoto() function and it works now:

if (AJAXphoto[photoId].readyState == 0 || AJAXphoto[photoId].readyState == 4) {