Home / Questions / 406736
Accepted
Marcos Rodríguez
Asked: 2021-11-15 06:16:34 +0800 CST 2021-11-15 06:16:34 +0800 CST

AJAX status never returns 200

  • 772

I am making a simple page to display all the images that use chromecast as a slideshow. I have found a JSON file on github with the links to the images. The problem is that some of them are no longer on the server (they return 404), so my idea is that before loading them, request only the header (fetchHead function) so as not to load the body of the image, if it returns a 404, no I include it, but it seems that when the if is correct (it returns true because the header status is 200), it always returns false, so the image is never loaded.

I'm going to leave the code, but it seems to me that the problem is in the scope of the return...

probe = (a) => {
for (i = 0; i < 10; i++) {
    if (fetchHead(a[i].url)) {
        console.log("done");
    } else {
        console.log("err");
    }
}
};

fetchHead = (a) => {
    let head = new XMLHttpRequest();
    head.onreadystatechange = function() {
        if (this.readystate === 2) {
            if (this.status === 200) {
                return true;
            } else {
                return false;
            }
        }
    };
    head.open('HEAD', a);
    head.send();
};

Needless to say, the a parameter is the JSON object from github

I explain myself fatally, but I think that with the code it can be clear...

I clarify, in the for there is a 10 so as not to overload the server with calls, keep in mind that each complete load of this page is about 120MB of images.

javascript

1 Answers

  1. Best Answer

    answering the question

    It never returns 200 because the property readystateis misspelled, it's readyStatewith a capital S.

    let head = new XMLHttpRequest();
 head.onreadystatechange = function() {
        if (this.readyState === 2) {
            if (this.status === 200) {
                console.log(true);
            } else {
               console.log(false);
            }
        }
    };
    head.open('HEAD', 'https://lh6.googleusercontent.com/-A0tXm8gjfMU/U08VDMRGtuI/AAAAAAAAvrI/IQEscTGZyJY/s1920-w1920-h1080-c/IMG_0293%2Bhe.jpg',true);
    head.send();

    There are two ways to make requests: asynchronous and synchronous.

    Do the next:

    if (fetchHead(a[i].url)) {
     console.log("done");
 }

    It implies that they are synchronous requests, however that would take more time since they must be made one by one and wait for their result. In addition, the HTTP request is being made asynchronously, that is, there is a mix of intentions in the code.

    asynchronous form

    To make it work optimally, making asynchronous requests, a couple of changes were made to the original code.

    1. The result of the function is not expected fetchHead(). Instead, just the array of urls is iterated and the function is called fetchHead()for each one so that all urls are processed simultaneously.
    2. Related to the previous point, since all the requests are asynchronous, a function was added callback()that will be called when all the urls have been processed, within callback()it you can filter the urls that work and use them as desired.

    let data = [
    {
        "url": "https://lh6.googleusercontent.com/-A0tXm8gjfMU/U08VDMRGtuI/AAAAAAAAvrI/IQEscTGZyJY/s1920-w1920-h1080-c/IMG_0293%2Bhe.jpg",
        "author": "Ziv Horesh"
    },
    {
        "url": "https://lh6.googleusercontent.com/-3LiF-MBl6OE/UO5TXZ724aI/AAAAAAAAE50/JWLqdeEM9QY/s1920-w1920-h1080-c/Colorado%2BRiver%2BSunset.jpg",
        "author": "Romain Guy"
    },
    {
        "url": "https://lh4.googleusercontent.com/-wkrGBuk0DoA/Us9JnUoXnTI/AAAAAAAAkTA/yDQexzLKhKY/s1920-w1920-h1080-c/DSC_0660.JPG",
        "author": "Alistair Nicol"
    }
];

// arreglo para guardar las url procesadas
// sean correctas o incorrectas
let checkedUrls = [];

fetchHead = (a) => {
    let head = new XMLHttpRequest();
    head.onreadystatechange = function() {
        if (head.readyState == 4) {
            if (head.status == 200) {
                checkedUrls.push({ url : a, status : true })
            } else {
                checkedUrls.push({ data : a, status : false })
            }
            // si todas las url se han procesado
            // llamar al callback
            if(checkedUrls.length == data.length) callback();
        }
    };
    head.open('HEAD', a.url,true);
    head.send(null);
};

// llamar fetchHead por cada url, de esta forma se mantiene
// asíncrono
data.forEach(fetchHead);


function callback(){

  console.log('las  url se procesaron\nLas siguientes url son válidas:');
  // filtrar arreglo checkedUrls donde status sea true
  console.log(checkedUrls.filter(url => url.status));

}

    synchronous form

    For this, the function was modified fetchHead()so that it makes the requests synchronously, the code is simpler but less efficient.

    let data = [
    {
        "url": "https://lh6.googleusercontent.com/-A0tXm8gjfMU/U08VDMRGtuI/AAAAAAAAvrI/IQEscTGZyJY/s1920-w1920-h1080-c/IMG_0293%2Bhe.jpg",
        "author": "Ziv Horesh"
    },
    {
        "url": "https://lh6.googleusercontent.com/-3LiF-MBl6OE/UO5TXZ724aI/AAAAAAAAE50/JWLqdeEM9QY/s1920-w1920-h1080-c/Colorado%2BRiver%2BSunset.jpg",
        "author": "Romain Guy"
    },
    {
        "url": "https://lh4.googleusercontent.com/-wkrGBuk0DoA/Us9JnUoXnTI/AAAAAAAAkTA/yDQexzLKhKY/s1920-w1920-h1080-c/DSC_0660.JPG",
        "author": "Alistair Nicol"
    }
];


probe = (a) => {
for (i = 0; i < a.length; i++) {
    if (fetchHead(a[i].url)) {
        console.log("done");
    } else {
        console.log("err");
    }
}
};

fetchHead = (a) => {
    let head = new XMLHttpRequest();
    head.open('HEAD', a, false);
    head.send();
    return head.status == 200;
};

probe(data);

    • 0