Mit AJAX DOM-Manipulieren


#1
Hallo,

Verusche mit AJAX den Inhalt zu "manipulieren". Aber mit folgendem Code klappt es nicht.

Meine index.html:


Code:
<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Text ändern mit AJAX</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "Daten.html", true);
  xhttp.send();
}
</script>

</body>
</html>
html datei, aus dem ausgelesen werden soll:

Code:
<!DOCTYPE html>
<html>
    <head>

    </head>
<body>
<div id=text>
    Daten wurden umgeändert
    </div>



</body>
  
</html>
AJAX ist für mich komplett neugebiet, daher klappt es vielleicht auch nicht wie ich mir das vorstelle. :)

index.html und Daten.html liegen im selben Ordner. Bin jetzt davon ausgegangen, das man aus der externen html datei die daten auslesen kann.

Für unterstützung wäre ich sehr dankbar.

Beispielcode ist vom W3Schools.


UPDATE:

Es klappt doch. Lag am Internet Explorer. Muss nur noch den code für Browserkompatilbilität im script einfügen für den Internet Explorer.

Gibt es eine möglichkeit bestimmte id´s unter Daten.html anzusprechen???

Ich meine wie muss die folgende Zeile aussehen
Javascript:
  xhttp.open("GET", "Daten.html", true);
damit ich in dem html dokument bestimmte id Tag´s anspreche?????
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#2
Zu deinem bisherigen Code ist anzumerken, dass es nicht sinnvoll ist, in dem gelesenen Dokument ein vollständiges HTML-Grundgerüst zu haben. Der Text wird ja, wie er ist, in dein Zielelement eingetragen und dann hast Du das Grundgerüst in einem p-Element, was weder sinnvoll noch valide ist.
Für deine neue Frage gibt es zwei Möglichkeiten:
1. Clientseitig mit Javascript: Ein HTML-Element mit document.createElement() erzeugen und den HTML-Text, den Du vom Server geholt hast, mit innerHTML hinein schreiben. Dann kannst Du mit das_element.querySelector() auf das betr. Element zugreifen.
2. Serverseitig mit PHP: Dazu musst Du ein PHP-Skript schreiben, das den HTML-Text liest und mit DOMDocument parst. Dann kannst Du ebenfalls auf das betr. Element zugreifen und nur dessen HTML-Text ausgeben. Einen entspr. Parameter, in diesem Fall die ID, müsstest Du an das Skript übergeben.
 

basti1012

Erfahrenes Mitglied
#3
Da habe ich mal ne kurze Frage zu .
Warum kann man TagName holen ? also so
Code:
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

               var parser = new DOMParser();
               var dom = parser.parseFromString(this.response, "text/xml");
     form= dom.getElementsByTagName('form')[0].outerHTML;       
     alert(form)
    }
  };
  xhttp.open("GET", "mail-mit-php-verschicken.php", true);
  xhttp.send();

aber eine Id nicht ?
Code:
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
               var parser = new DOMParser();
               var dom = parser.parseFromString(this.response, "text/xml");
         id= dom.getElementById('meineid2').outerHTML;
        
alert(id)
    }
  };
  xhttp.open("GET", "mail-mit-php-verschicken.php", true);
  xhttp.send();
Beim TagName bekomme ich den Quelltext und bei der Id sagt er mir da es sie nicht gibt Bzw Null
 

basti1012

Erfahrenes Mitglied
#5
Der Code von mir da geht nicht. Mache ich es so wie du es schon sagtest mir querySelector dann geht es komischerweise
Code:
<script>
               var parser = new DOMParser();
               var dom = parser.parseFromString(this.response, "text/html");
               was=dom.querySelector('#meineid').innerHTML;
              alert(was)
</script>
Habe es jetzt noch 2 mal versucht ,aber geht nur mit querySelector
wieder was ,was man nicht verstehen muss
 
#6
HTML:
<!DOCTYPE html>
<html>
<body>

<h1>The XMLHttpRequest Object</h1>

<p id="demo">Text ändern mit AJAX</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

               var parser = new DOMParser();
               var temp = parser.parseFromString(this.response, "text/html");
              was=temp.querySelector('#text').innerHTML;

        document.getElementById("demo").innerHTML=was;
    }
  };
  xhttp.open("GET", "Daten.html", true);
  xhttp.send();
}
</script>

</body>
</html>
Also, so hat es jetzt funktioniert. Vielen dank an euch beide.
 

Sempervivum

Erfahrenes Mitglied
#7
BTW: Beim Arbeiten mit Ajax lohnt es sich immer, auf jQuery zu setzen. In diesem Fall reduziert sich die ganze Operation auf eine Zeile:
Code:
        function loadDoc() {
            $("#demo").load("thread104-ajax-src.html #text");
        }
 
#8
Ich belebe das Thema mal wieder, weil ich noch eine frage habe. :)

@Sempervivum
jQuery ist leider nicht erlaubt.

wie ist das, wenn ich aus einer xml datei und zeitgleich aus einer html datei, Daten auslesen will?

Zumindest habe ih was, was auch funktioniert, nur die frage ist ob das auch viel einfacher und kürrzer geht.
Ohne jQuery leider.

Hier mal mein Javascipt:

Javascript:
function load_amasya() {

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

               var parser = new DOMParser();
               var temp = parser.parseFromString(this.response, "text/html");
              was=temp.querySelector('#amasya').innerHTML;

        document.getElementById("hauptteil").innerHTML=was;
    }
  };
  xhttp.open("GET", "Daten.html", true);
  xhttp.send();

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

               var parser = new DOMParser();
               var temp = parser.parseFromString(this.response, "text/html");
              was=temp.querySelector('#amasya').innerHTML;

        document.getElementById("zahlen").innerHTML=was;
    }
  };
  xhttp.open("GET", "index.xml", true);
  xhttp.send();
}
Wie gesagt es funktioniert, nur geht das kürzer???
 
#10
- Fetch API
- Bitte kein "var" nutzen => immer "const" nutzen, außer du möchtest die Variable neu zuweisen, dann "let".
- Ja, das geht um einiges kürzer, weil du dieselbe Logik zweimal benutzt. Extrahiere das einfach in eine Funktion.
Kann es sein das Fetch mit json zusammen funktioniert? Oder verstehe ich das falsch? Irgendwie kappiere ich diese Fetch geschichte nicht.

Was muss ich machen damit mein javascript auch unter chrome funktioniert????

Bekomme unter chrome folgende Fehlermeldung angezeigt:

Code:
Access to XMLHttpRequest at 'file:///C:/Users/******/Desktop/Background/Daten.html' from origin 'null'
has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
 

ComFreek

Mod | @comfreek
Moderator
#11
Kann es sein das Fetch mit json zusammen funktioniert?
Ja, aber genauso gut funktioniert XMLHTTPRequest mit JSON. In beiden Fällen via JSON.parse.

Oder verstehe ich das falsch? Irgendwie kappiere ich diese Fetch geschichte nicht.
Es ist einfach eine neue API, die XMLHTTPRequest ablösen soll.

Bekomme unter chrome folgende Fehlermeldung angezeigt:
Google sagt es dir sofort ;) XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP