Javascript: how to fill part of the page with html frome some url and update it ragulary?

So I have simple html web page with one div with id="toFill" on it. Page has header script stule and body blocks. I have some file like markUpToAdd.html with for example html list (no header body etc - just <ul开发者_C百科> <li> etc) jo my server will update file from time to time. I need using Javascript to put contents of markUpToAdd into that div and update each 30 seconds. How to do such thing? Not using Jquery or any special libs.

since you're not using a library, you'll have to do it he long way...

function update(){
 var xmlhttp;
 try{
  xmlhttp = new XMLHttpRequest();
 } catch(e){
  var success = false;   
  var objects = ["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  for(var i=0; i<objects.length && !success; i++){
   try{
    xmlhttp = new ActiveXObject(objects[i]);
    success = true;
   }catch(e){};
  }
  if(!success) throw new Error("AJAX is unavailabe");
 }
 xmlhttp.onreadystatechange = function(){
  if(xmlhttp.readyState==4){
   document.getElementById('toFill').innerHTML = xmlhttp.responseText;
  };
 }
 xmlhttp.open("get", "markUpToAdd.html", true);
 xmlhttp.send(null);
}
update();
setInterval(update, 30000);

untested. could also be optimized (only need to determine the XHMLTTPRequest object once instead of during each tick).

If you use jquery you can use the function jQuery.get() [http://api.jquery.com/jQuery.get/]

$.get("markUpToAdd.html", function(data){ $('#toFill').innerHtml = data; });