Ajax Loader 2

Eddie Traversa Aug 31, 2005

General

Use this script to load XML and HTML files with XMLHTTPREQUEST. In the div id=EchoTopic tag, just add the name of the file to load and the element to display the file in, usually a div element.

Notes

Created by: Eddie Traversa

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: ajaxLoader.js

function ajaxLoader(url,id) {
  if (document.getElementById) {
    var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  }
  if (x) {
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.status == 200) {
        el = document.getElementById(id);
        el.innerHTML = x.responseText;
      }
    }
    x.open("GET", url, true);
    x.send(null);
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#contentLYR {
  position:absolute;
  width:200px;
  height:115px;
  z-index:1;
  left: 200px;
  top: 200px;
}

Body

Paste this code into the BODY section of your HTML document

<body onload="ajaxLoader('demo.xml','contentLYR')">


<div id="contentLYR">
</div>

Leave a Response

(15 comments)

its very nice to understand and implement it... thanks..

thamil Sep 8, 2008

I love AJAX!

phannarak Aug 10, 2008

Nice content. thanks

fnfzone Jun 25, 2008

You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript forums[/a].

Lee May 12, 2008

Thanks for the heads-up. I have removed the link.

Lee May 12, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details