# Ajax responseText als HTML behandeln



## zer0 (3. September 2010)

Hallo,

ich setze ein XmlHttpRequest ab, und bekomme als responseText die HTML Seite zurück. Das ist auch alles gut so. Nur benötige ich jetzt ein Element aus der Seite vom response. Deswegen will ich mittels getElementById() das Element auswählen, aber der Text von responseText wird anscheinden nicht als HTML behandelt.

Kann ich das irgendwie machen?

Gruß


----------



## Sven Mintel (3. September 2010)

Moin,

ja, das kannst du machen.

Sofern die HTML-Source, die du da geliefert bekommst, gültiges XML ist, kannst du per responseXML auf das Dokument-Objekt zugreifen.


----------



## zer0 (3. September 2010)

Und im gültiges XML zu bekomme muss ich im HTML beim meta-Tag den MimeType "application/xhtml+xml" angeben oder?

Den wenn ich responseXML benutze bekomme ich nur "null" zurück!


----------



## Sven Mintel (3. September 2010)

Nö, um gültiges XML zu bekommen, musst du gültiges XML liefern, es reicht da nicht aus, zu Behaupten, dass es XML ist.

Hier die Grundregeln: http://de.wikipedia.org/wiki/Extensible_Markup_Language#Physischer_Aufbau


----------



## zer0 (3. September 2010)

Aber ich habe doch schon alles gemacht. Mein Dokument ist auch XHTML valide.

Ich habe es mal so probiert, aber geht auch nicht:

```
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
...
```


----------



## Sven Mintel (3. September 2010)

Poste doch mal die Source deines Dokumentes, also das, was dort als Antwort ankommt.


----------



## zer0 (3. September 2010)

Ich mache folgendes:

```
var response = xmlHttp.responseXML;
alert(response);
```

Und bekomme dann nur null als Ausgabe!

EDIT:

Bin grad über folgendes Thema gestolpert: http://www.tutorials.de/javascript-ajax/334754-ajax-responsetext-parsen.html

Das ist genau das, was ich auch brauche. Kannst du mir vllt ein Beispiel geben wie du das meinst dort, denn das versteh ich nicht ganz? 

Gruß


----------



## Sven Mintel (3. September 2010)

zer0 hat gesagt.:


> Ich mache folgendes:
> Das ist genau das, was ich auch brauche. Kannst du mir vllt ein Beispiel geben wie du das meinst dort, denn das versteh ich nicht ganz?




```
var dummy = document.createElement('div');
    dummy.innerHTML=xmlHttp.responseText;
```

dummy ist ein Elementknoten, auf den du alle DOM-Methoden eines soclhe Knoten anwenden kannst.
Da ist aber der Haken: so ein Knoten hat keine Methode getElementById() 

bspw. getElementsByTagName() könntest du hingegen darauf anwenden, denn das ist eine Methode von document *und* Elementknoten


----------



## zer0 (4. September 2010)

Okay, danke schön. Inzwischen habe ich es auch geschafft das ich gültiges XML geliefert bekomme. Ich hab nur noch vergessen den richtigen Header in PHP zu senden 

Jetzt ist die Frage was ich benutze. XML wäre zwar eleganter, nur das Problem ist das andere User Einträge machen können und also nicht valides gültiges XHTML eintragen können.

Damit würde es dann gleich zu verarbeitungsfehlern kommen. 
Hmm, was benutz ich jetzt besser?


----------



## Sven Mintel (5. September 2010)

Naja, optimal wäre natürlich, wenn du die Benutzereingaben so bearbeitest, dass sie valide sind, bevor sie auf die Welt losgelassen werden.

Es muss ja nicht mal valides XHTML sein, valides XML ist ausreichend, damit responseXML etwas liefert.


----------



## scrippi (6. September 2010)

```
var dummy = document.createElement('div');
    dummy.innerHTML=xmlHttp.responseText;
```

das hier kann nur funktionieren, wenn dummy in das Dokument auch integriert wird, zB über appendChild()


----------



## zer0 (7. September 2010)

scrippi hat gesagt.:


> ```
> var dummy = document.createElement('div');
> dummy.innerHTML=xmlHttp.responseText;
> ```
> ...


 
Da irrst du dich, es geht auch so!


----------



## scrippi (7. September 2010)

Streite ich nich ab, hatte bei mir jedoch erst immer geklappt als es im document war...


----------



## Sven Mintel (7. September 2010)

Hier mal eine Hilfsfunktion, welche ein HTML-Dokument anhand von HTML-Code erstellt und dies zurückliefert:
	
	
	



```
<script type="text/javascript">
<!--
function loadHTML(strHTML)
{
  var doc=null;
  if(document.all && !window.opera)//IE
  {
    doc=document.createDocumentFragment();
    doc.appendChild(doc.createElement('root'));
    doc.firstChild.innerHTML=strHTML;
  }
  else
  {
    if(document.implementation)
    {
      if(window.opera || typeof window.mozInnerScreenX!='undefined')//Opera + FF
      {
        doc=document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'root',  null);
        doc.documentElement.innerHTML=strHTML
      }
      else//chrome+safari
      {
        doc=document.implementation.createDocument ('http://www.w3.org/1999/xhtml', '',  null);
        var root=doc.createElement('root');
                root.innerHTML=strHTML;
                doc.appendChild(root);
      }
    }
  }
  return doc;
} 
//Kurzer test
alert(loadHTML('<b><i id="elementID">Es geht</i></b>').getElementById('elementID').innerHTML);


//-->
</script>
```

Der Test zeigt, auch getElementById() ist dort nutzbar.
Getestet in
FF3.6.8
Opera9.5 
Win-Safari 5.0.1
Chrome5.0 
IE6-8


----------



## zer0 (8. September 2010)

Hey,
vielen Dank für den Code. Ich habe es aber jetzt schon anders gelöst und klappt gut.

Aber vllt hat jemand noch eine andere Idee wie ich mein select-Element "tauschen" kann. Ich will grad die ganzen option-Einträge gegen andere tauschen.

Dafür habe ich auch eine Lösung, aber der Interesse halber, vllt hat ja noch jemand eine bessere.

Hier meine Lösung:


```
var response = xmlHttp.responseText; // Die ganze HTML Seite als Rückgabe
			
var dummy = document.createElement('div'); // Dummyelement
dummy.innerHTML = response; // HTML Code in das Dummy Element einfügen
			
var selectElements = dummy.getElementsByTagName('select'); // Alle select-Element auswählen
var selectElement = selectElements[0]; // Das erste (und einzige) auswählen
			
var categorys = document.getElementById('category'); // Aus meiner HTML Seite das select-Element mit der ID category auswählen
			
var categorysLength = categorys.length; // Anzahl der aktuellen option-Einträge
var selectElementLength = selectElement.length - 1; // Anzahl der neuen option-Einträge - 1 sodass die Variable auf das letzte Element zeigen kann
			
// Dem select-Element das neue Element hinzufügen 
categorys.options[categorysLength] = selectElement.options[selectElementLength];
```

Gruß


----------

