Analyser les données XML à la page de chargement et insérer dans div en utilisant AJAX/Javascript

Question

Je travaille sur une page qui utilise javascript/AJAX pour analyser XML à partir d'un fichier. Je dois être capable d'analyser une URL sur le chargement d'une page et l'insérer dans un div. J'ai le script écrit mais j'ai besoin d'aide pour obtenir 2 choses: 1) l'avoir analyser un fichier XML et charger ces données dans un div sur le chargement de la page 2) l'option de cliquer sur un lien et charger ces données dans la même div de ce qui était là quand la page chargée.

J'utilise un script externe pour ce faire & eMbeded un lien vers dans ma page

HTML exemple pour demander des données:

<div id="rightcolumn"> 
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button> 
</div> 

Comment puis-je changer que pour charger # 1 lorsque la page charge & # 2 quand un lien est cliqué?

Pour le script, ai-je besoin de quelque chose de spécial en haut pour m'assurer qu'il se charge correctement? jQuery a $(document).ready(function() {//GUTS}, ai-je besoin de quelque chose de similaire avec AJAX?

Mon script

function loadXMLDoc(url){ 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function(){ 

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 

    var anno= xmlhttp.responseXML.documentElement.getElementsByTagName("anno"); 
    // Parser Guts 

} 
document.getElementById('rightcolumn').innerHTML=txt; 
    } 
} 
    xmlhttp.open("GET","url",true); 
    xmlhttp.send(); 

Answer 1

Utilisation

<!-- when the user clicks --> 
<button onclick="ajax('#ELEMENT','cd_catalog.xml')">Get CD info</button> 

// when the page loads 
window.onload = function() { 
    ajax('#ELEMENT', 'cd_catalog.xml'); 
}; 

ou vous pouvez placer une balise de script au bas de la page, ou utiliser l'événement dom ready

code

function getXmlHttpObject() { 
    var xmlHttp; 
    try { 
     // Firefox, Opera 8.0+, Safari 
     xmlHttp = new XMLHttpRequest(); 
    } catch (e) { 
     // Internet Explorer 
     try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    } 
    if (!xmlHttp) { 
     alert("Your browser does not support AJAX!"); 
    } 
    return xmlHttp; 
} 

function ajax(el, url, onSuccess, onError) { 
    if (typeof el == "string") 
     el = document.getElementById(el); 
    var xmlHttp = getXmlHttpObject(); 
    xmlHttp.onreadystatechange = function() { 
     if (this.readyState === 4) { 
      // onSuccess 
      if (this.status === 200) { 
       if (el) 
       el.innerHTML = this.responseText; 
       if (typeof onSuccess == 'function') 
       onSuccess(this.responseText); 
      } 
      // onError 
      else if(typeof onError == 'function') { 
       onError(); 
      } 
     } 
    }; 
    xmlHttp.open("GET", url, true); 
    xmlHttp.send(null); 
    return xmlHttp; 
}​