Анализ данных XML на загрузку страницы и вставка в div с использованием AJAX/Javascript

Question

Я работаю над страницей, использующей javascript/AJAX для анализа XML-файла из файла. Мне нужно проанализировать URL-адрес загрузки страницы и вставить ее в div. У меня есть сценарий, но мне нужна помощь, чтобы получить 2 вещи: 1) заставляя его анализировать XML-файл и загружать эти данные в загрузку div на странице 2) возможность щелкнуть ссылку и загрузить эти данные в тот же div вместо от того, что было там, когда загружена страница.

Я использую внешний скрипт, чтобы сделать это & поместить его ссылку на него в моей странице

пример

HTML запрашивать данные:

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

Как изменить, что для загрузки # 1, когда страница загружается & # 2 при нажатии ссылки?

Для сценария мне нужно что-то особенное сверху, чтобы убедиться, что оно правильно загружено? jQuery имеет $(document).ready(function() {//GUTS}, мне нужно что-то подобное с AJAX?

My 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

Использование

<!-- 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'); 
}; 

или вы можете поместить тег сценария в нижней части страницы, или использовать dom ready событие

код

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; 
}​