Jak wczytać dane z pliku XML do HTML używając JavaScript

Question

Cześć,
oto mój kod: http://jsfiddle.net/kj1n8uqz/8/
Chciałbym, aby użytkownik po kliknięciu przycisku "Wczytaj" mógł wybrać sobie sam który plik chce wczytać. Dany plik jest wczytywany jako XML i uzupełniany w odpowiednie inputy/selecty i wyświetlony na stronie. Proszę nie piszcie "użyj JSON", do tego zadania mam użyć formatu XML. Jeżeli chodzi o nazwę name, które są takie same jak "choice" i "choice1" to niestety ale muszą takie zostać (przydatne jest to w innych elementach tego zadania którego tutaj nie załączyłem).

Plik XML do wczytania:

 

<?xml version="1.0"?>
<K1>
<punkty name="choice" value="4" checked="false"></punkty>
<punkty name="choice" value="3" checked="false"></punkty>
<punkty name="choice" value="2" checked="false"></punkty>
<punkty name="choice" value="1" checked="false"></punkty>
<punkty name="total" value="0" checked="false"></punkty>
<punkty name="choice1" value="4" checked="false"></punkty>
<punkty name="choice1" value="3" checked="false"></punkty>
<punkty name="choice1" value="2" checked="false"></punkty>
<punkty name="choice1" value="1" checked="false"></punkty>
<punkty name="total1" value="0" checked="false"></punkty>
</K1>
<P1>
<punkty value="5" id="valueOne"></punkty>
<punkty value="0" id="valueOne1"></punkty>
<punkty value="0" id="valueOne2"></punkty>
<punkty value="0" id="valueOne3"></punkty>
<punkty value="3" id="valueOne4"></punkty>
<punkty value="0" id="valueOne5"></punkty>
</P1>

Czy da się to jakoś zrobić? Jeżeli tak to w jaki sposób? Gdzie powinienem szukać rozwiązania? Trochę się z tym męczyłem ale generalnie nie za bardzo wiem od czego zacząć. Wiem, że można spróbować to zrobić AJAX'em na podstawie przykładu który jest tutaj: https://www.w3schools.com/js/js_ajax_xmlfile.asp
Jednak pokazać dane na pustym arkuszu to nie problem, w jaki sposób sprawić aby były wyświetlane w odpowiednich input'ach czy select'ach?
Za wszelkie uwagi/wskazówki byłbym naprawdę bardzo wdzięczny! :)

Pozdrawiam

Answer 1

Po pierwsze, nie polecam W3Schools, a MDN.

Co do samego problemu, najlepiej będzie wczytać ten XML jako dokument i pobrać jego poszczególne elementy, a następnie przenieść ich zawartość do konkretnych elementów na stronie WWW.

Comments

Nie za bardzo ogarniam tego DOM parser'a dlatego pytam o php

---

Kod działa, robi wszystko to co chcę, tutaj link: https://next.plnkr.co/edit/9kRLWf2OiaRcJaqj (niestety nie działa poprawnie, trzeba odpalić w xamppie dla testowania)

Jest jedno ale. Jeżeli będzie dwóch użytkowników, użytkownik X i Y. Załóżmy, że użytkownik X wypełnił formularz, zapisał go i wgrał na serwer i skończył. Wtedy plik dalej jest na serwerze, jeżeli użytkownik Y chce wypełnić formularz ma wypełniony przez użytkownika X. W jaki sposób zrobić coś takiego, że jeżeli pierwszy raz wchodzimy na stronę (nie wiem odświeżenie czy coś) to wszystkie pliki z katalogu "uploads" są usuwane?
Druga opcja na rozwiązanie tego problemu to zapisywanie pliku .xml pod unikalną nazwą w folderze "uploads" i dany parametr przekazywanie do:

xhttp.open("GET", "uploads/xml", true);

Pytanie w jaki sposób w miejsce "uploads/xml" przekazać nazwę pliku zapisanego parametru, który jest generowany w PHP?

---

A jeśli kod JS byłby generowany przez PHP? Wówczas po prostu podstawiałoby się zawartość zmiennej.

Albo generować przez PHP zmienną globalną z nazwą pliku i ją tam użyć:

window.sessionId = '<?=$generatedCode;?>';

 

---

Generalnie problem już prawie rozwiązałem ale dręczy mnie jedna sprawa (tutaj dostępny kod: https://next.plnkr.co/edit/9kRLWf2OiaRcJaqj?preview )
Chciałbym aby po wgraniu danych na serwer i zczytaniu informacji plik od razu został usunięty. Jak narazie jestem to w stanie po kliknięciu button'a z przekierowaniem "delete.php"
 

<?php    
    $source = 'data.xml';
    unlink($source);
?>

Jednak w jaki sposób to zrobić aby po kliknięciu na przycisk "Upload" uruchomić w PHP usuwanie tego pliku, aby informacje zdążyły się zczytać a następnie plik został usunięty?

---

A czemu nie zrobisz drugiego żądania Ajaksowego po tym jak zakończysz obrabiać pierwsze?