Teil einer Seite mit Javascript laden?

[tsbmusic]

Hi,

gibt es eine Möglichkeit mit Javscript nur einen Teil einer Seite neu zu laden, z.B. ein Div?

Gruss
tsbmusic

 

[harryman]

Hi,

klar: Wenn du z.B. auf einen Link klickst, könntest du an den onClick-Event einen Ajax-Call binden, mit dem du eine Division neu lädst.

 

[tsbmusic]

Und jetzt auf Deutsch bitte...

Was denn für einen Ajax-Call?

 

[harryman]

Ups - sorry,
war wohl zu undeutsch

Also: ganz normal eine Javascript-Funktion aufrufen und in dieser Javascript-Funktion per AJAX die Division mit neuem Inhalt laden.

Das setzt natürlich ein paar Grundkenntnisse in Javascript und Ajax voraus.
Googel mal a weng oder schau mal z.B. bei jquery.com vorbei. Da gibt es viele Beispiele.

 

[Back2toxic]

Warum denn immer JQuery oder Prototype (MooTools, Dojo, YUI, ....)!? Ich muss doch kein ganzes Framework laden, nur weil ich 'nen Ajax-Request absetzen will...

function $(id){ 
    return document.getElementById(id); 
}


/**
 * function setRequest
 * params:  url: URL, zu der der Request aufgebaut werden soll
 *          div: ID des Elementes, in das der neue Inhalt geladen werden soll
 *          add: Soll der Inhalt in div Ueberschrieben werden (false) oder
 *               soll der neue Inhalt angehaengt werden (true)?  
 **/
function setRequest(url,div,add) {
  var req = null;
  try{
      req = new XMLHttpRequest();
  } catch (ms){
      try{
          req = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (nonms){
          try{
              req = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (failed){
              req = null;
          }
      }
  }
  if (req == null) alert("Error creating request object!");
  req.open("GET", url, true);
  req.onreadystatechange = function(){  
      switch(req.readyState) {
          case 4:
              if(req.status!=200) {
              }else{
                  if(add == true){
                    $(div).innerHTML = $(div).innerHTML+req.responseText;
                  } else {
                    $(div).innerHTML = req.responseText;
                  }
              }
            break;
          default:
              return false;
            break;
      }
  };
  //req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  req.send(null); 
}

Der Aufruf erfolgt, in dem du die Funktion setRequest an ein DOM-Event bindest.
z.B. so:

<div id='contentContainer'>alter Inhalt</div>
<a href="#" onclick="setRequest('url/zur/Datei/mit/neuem/inhalt.xyz','contentContainer',false); return false;">Klick mich</a>