Przesyłanie obrazu AJAX

Question

Witam, niedawno rozpocząłem zabawę z AJAX'em i na początek nauczyłem się przesyłać treść pliku .txt na strony:

function getByAjax(){
   
    xhr = new XMLHttpRequest();
    
    xhr.onload = () => {
        
        if(xhr.status === 200){
            document.getElementById("article").textContent = xhr.responseText;
        }
        
    }
    xhr.open("GET", "art-1.txt" , true);
    xhr.send();
}

Jednak nigdzie nie mogę znaleźć jak w podobny lub inny sposób przesłać obraz. Ktoś coś mógłby podpowiedzieć?

Answer 1

Obraz możesz pobrać w identyczny sposób. Dane które pobierzesz, to czysta binarka - pytanie, do czego Ci one potrzebne?

Jeśli chcesz wyświetlić obraz, wstaw jego link do atrybutu src w elemencie img. Przeglądarka sama zatroszczy się o jego ściągnięcie i wyświetlenie.

---

Niemniej jednak - odpowiadając na Twoje pytanie, tak ściągniętą binarkę bez problemu można wyświetlić.
1) Musisz usawić xhr response type na blob
2) Przypisać do atrybutu src objectURL utworzony z pobranego bloba

Answer 2

pobieranie obrazków zostaw lepiej przeglądarce, pozwól jej samodzielnie zrobić odpowiedni cache, nie widzę za bardzo uzasadnienia dla wysyłania takiej binarki przy użyciu XHR...

Answer 3

troche lipa że używasz zmiennych globalnych w funkcji getByAjax i przesyłasz dane na server za pomocą get a nie post

wszystko jest opisane tylko trzeba po angielsku w google wpisać

Comments

i przesyłasz dane na server za pomocą get a nie post

skoro już tak krytykujesz, to powiedz mi dlaczego od razu zakładasz, że jeśli chcemy przesłać jakieś dane to tylko post, a dlaczego nie put? Jak już krytykujesz to nie pisz sam głupot, bo get i post to tylko jedne z kilku metod jakie się powszechnie stosuje... a z Twojej odpowiedzi autor posta mógłby wywnioskować, że tylko te dwie powinno się stosować... a to kompletna bzdura.