IE not triggering jQuery Ajax success

问题:

I'm working on a script to load some images async using jQuery.

Here is a code snippet of the function that loads the images -

try{
    for(img in imgsArray){
        $.ajax({    
            async: false,
            type: "get",
            url:imgsArray[img],
            success:function(imgFile){
                alert("success");
                //do something useful
            },
            error:function(XMLHttpRequest,status,error){
                //do nothing
            }
        });//ajax
    } 
}
catch(e){
    //oops
}

I have tested this in Firefox, Webkit (Safari,Chrome) and it works.

The images are in a folder on the server and I'm using jQuery 1.3.

any ideas?

回答1:

A simple fix of this problem is to provide the jQuery setting dataType : 'text' or dataType : 'xml' or dataType : 'json' or any other available response type.

I had same problem, but it's working fine after specifying the dataType setting in the .ajax call.

IE is really not an intelligent browser, it doesn't assume the default value string.

Try it... good luck.

回答2:

Try setting the cached-option to false.

   $.ajax({        
            async: false,
            cache: false, 
            type: "get",
            url:imgsArray[img],
            success:function(imgFile){
                    alert("success");
                    //do something useful
                    },
                    error:function(XMLHttpRequest,status,error){
                    //do nothing
            }
    });//ajax

回答3:

I had a similar problem -- IE appears to trigger failure if it can't parse the response as xml, even if the request was a success, so if you're requesting an image, for example, it would return a xhr.status of 200 in the error block.

I stuck my "success" functionality in the success block for FF and in the error block wrapped in an "if (xhr.status == 200)" conditional.

回答4:

use the following tag to support cross browser

$.support.cors = true;

回答5:

In the end I had to create a separate function for IE browsers.

The objective was to test for an image at a location so the code looked something like -

    //get the images from the array
for(img in imgsArray){  

    if($.browser.msie){     
    /* DOM manipulation method */
    //IE has problems with ajax so try this instead
    //create a new image object with unique ID
    var testImg = $("<img/>");
    var imgID = "imgID"+img;

    //hide it..
    testImg .css({ "visibility":"hidden" });
    testImg .attr("src",imgsArray[img]);
    testImg .attr("id",imgID);

    //.. and insert it into the DOM or else test will always fail
    //because it does not exist as far as browser is concerned
    $("body").append(testImg );

    //test for image
    if(document.getElementById(imgID).width > 60){
        //do something useful
    }
}

It is not really the answer to my question but it's a functional work around.

回答6:

I've been having similar problems with IE and AJAX over the past few days with my JSONP Web Service. Even the smallest error in your code can cause everything to break in IE.

Probably the best thing to do is debug the page in IE using Visual Web Developer Express or Visual Studio. Here is a tutorial of how to do it:

How to debug JavaScript with Visual Web Developer Express

Follow the instructions and maybe place breakpoints on at the begining of the AJAX request.

Try these things too:

• Removing "XMLHttpRequest" from the error field, I have never used it before and my code works just fine;
• Make sure you are using the latest version of jquery (1.3.2)?

Hope you get it working soon!

回答7:

set 'cache: false' inside .ajax config works for me :)

回答8:

I'd suggest using Charles Proxy to see what's going on - i.e. is the request going out at all? What's the response?

Also, I think there might be some Exception thrown, so why don't you add some alerts in the Catch section to see what happens?

回答9:

if you success is:

Success: function (data) {
                    if (data != null) {
                        alert(data);
                       ;
                    }
                },

change for this:

 success: function (data, textStatus, XMLHttpRequest) {
                alert(data.d);
            } 

回答10:

Another thing you can try, very much the same as the solution from John Saunders, is try "jsonp" as the content type, instead of json - for a json data type expected response. I had to try this with IE to get my bug to go away, which was the normal code working in every other browser, except IE.

Here's my code that worked:

$.ajax({
    url: request_url,
    data: { var1: 'stuff' },
    dataType: "jsonp",
    type: "get",
    async: true,
    cache: false,
    success: function(collections) {
         // handle result
    }
});

Cheers.

回答11:

I came to this question with similar issues. And answers above fixed many of my problems. However, there's one more trick I need to do. Don't use

$.ajax({...,
success: myfunc,...});

use

$.ajax({...,
success: myfunc(),...});

回答12:

If you use input check if you have one choice as "selected", if you don´t ie do not pass this parameter to ajax function.