Trying to wrap my mind around AJAX...not getting far.

[jblevins1991]

I have a blog i am creating from scratch. I have the html page i want to publish the blog to, the javascript file that is going to be publishing the blog, and the xml file that contains the blog posts. I have looked at all of the information on the w3schools website and i cannot find what is wrong with the script. The script has a function named Blog() in it that i want activated by a button. Here is my code that i have.

Here is the html code i have.


<div id="blog">
<script type="text/javascript" scr="blog.js"></script>
<button type="button" onclick="Blog()">click me</button>
</div>


Here is the code from blog.js

function Blog()
{
var XHR;
if(window.XMLHttpRequest)
{
XHR = new XMLHttpRequest();
}
else
{
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}

XHR.onReadyStateChange = function()
{
if(XHR.readyState == 4 && XHR.status == 200)
{
var xmldom = XHR.responseXML;
var output = "";
var items = xmldom.getElementsByTagName("item");

for(var i = 0;i < items.length;i++)
{
output = xmldom;
}

document.getElementById("blog").innerHTML = output;
}
}

XHR.open("GET", "blog.xml", true);

XHR.send();
}


Here is the code from the blog.xml file.

<?xml version="1.0" encoding="UTF-8"?>

<rss version="2.0">

<channel>
<item>
<title>hello</title>

<link>www.google.com</link>

<description>world</description>
</item>
<item>
<title>hello</title>

<link>www.google.com</link>

<description>world</description>
</item>
<item>
<title>hello</title>

<link>www.google.com</link>

<description>world</description>
</item>
<title>
Unified Feed
</title>

<category>
Business
</category>

<language>
US-en
</language>

<ttl>
60
</ttl>
</channel>

</rss>

Would love some help with this .

[Logic Ali]

for(var i = 0;i < items.length;i++)
  {
    output = xmldom;    
  }

for(var i = 0;i < items.length;i++)
{
  output += xmldom.innerHTML;    
}

[jblevins1991]

for(var i = 0;i < items.length;i++)
{
  output += xmldom.innerHTML;    
}

xml documents do not have the innerHTML property. can somebody explain this. also i change all of the code in the if(xhr.status == 4) loop to:

alert(xmldom.documentElement.nodeName);

and for some reason it does nothing. like the file doesn't respond at all.

[Gudlife]

<div id="blog">
<script type="text/javascript" scr="blog.js"></script>
<button type="button" onclick="Blog()">click me</button>
</div>

try it with src="blog.js"^^

[jblevins1991]

<div id="blog">
<script type="text/javascript" scr="blog.js"></script>
<button type="button" onclick="Blog()">click me</button>
</div>

try it with src="blog.js"^^

i tried to make my script an inline script and that didn't work. i also tried this and it didn't work :\.

[Gudlife]

Is your site online?
Maybe I could have a look that way.

[jblevins1991]

i sent you the url of my site in a private message.

[Logic Ali]

<script type="text/javascript" scr="blog.js"></script>

As you have been told already but may have missed, that should be src

Clearly you aren't even using the error console.

<div id="blog">
<script type="text/javascript" src="blog.js"></script>
<button type="button" onclick="Blog()">click me</button>
</div>

Above you have contained your script and button inside an element whose content you are about to wipe-out.

<div id="blog">  </div>
 <script type="text/javascript" src="blog.js"></script>
 <button type="button" onclick="Blog()">click me</button>

XHR.onReadyStateChange =

Event handlers are written all lowercase.


This will extract your content:

function Blog()
{
var XHR;
if(window.XMLHttpRequest)
{
XHR = new XMLHttpRequest();
}
else
{
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}

XHR.onreadystatechange = function()
{
  if(XHR.readyState == 4 && XHR.status == 200)
  {
    var xmldom = XHR.responseXML;
    var output = "";
    var items = xmldom.getElementsByTagName("item");
       
    for( var i = 0; i < items.length; i++ )
    { 
      var cn = items[ i ].getElementsByTagName( '*' ),
          cnLen = cn.length;            
            
      for( var j = 0; j < cnLen; j++ )
        output += cn[ j ].firstChild.nodeValue + ' ';
              
      output += '<br>';  
    }
        
    document.getElementById("blog").innerHTML = output;
  }
}

XHR.open("GET", "blog.xml", true);

XHR.send();
}