AJAX Blog System

Question

ObSys 56 Junior Poster

11 Years Ago

I am looking into blogging technology, specifically using XML files to hold blog posts and reading them into a webpage using Javascript. I have been looking at the w3schools website for bits of code but for some reason my application does not display the content on the screen. My code is as follows:

XML FILE

<?xml version="1.0" encoding="ISO-8859-1"?>

<blogPost>
    <title> Test </title>
    <text> this is a small tester</post>
    <author>William Ahmed</author>
    <date>16/03/93</date>
</blogPost>

<blogPost>
    <title> Test </title>
    <text> this is a small tester</post>
    <author>William Ahmed</author>
    <date>16/03/93</date>
</blogPost>

<blogPost>
    <title> Test </title>
    <text> this is a small tester</post>
    <author>William Ahmed</author>
    <date>16/03/93</date>
</blogPost>

<blogPost>
    <title> Test </title>
    <text> this is a small tester</post>
    <author>William Ahmed</author>
    <date>16/03/93</date>
</blogPost>

JAVASCRIPT

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject()
{
    if(window.XMHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    } 
    else
    {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xmlHttp;
}


function load()
{
    if(xmlHttp)
    {
    alert("loadBlog Init");
        try
        {
            xmlHttp.open("GET","blog.xml",true);
            xmlHttp.onreadystatechange=handleStateChange();
            xmlHttp.send(null);
        } 
        catch(e)
        {
            alert(e.toString());
        }
    }
}

function handleStateChange()
{
    alert("HandleStateChange");
    if(xmlHttp.readystate==4 && xmlHttp.status==200)
    {
        try
        {
            handleResponse();
        }
        catch(e)
        {
            alert(e.toString());
        }
    }
    else
    {
        alert(xmlHttp.statusText);
    }
}

function handleResponse()
{
    alert("HandleResponse");
    var xmlResponse = xmlHttp.responseXML;
    var root = xmlResponse.documentElement;
    var title=root.getElementsByTagName("title");
    var text=root.getElementsByTagName("text");
    var author=root.getElementsByTagName("author");
    var date=root.getElementsByTagName("date");

    var blogData="";
    for(var i=0; i<title.length; i++)
    {
        blogData=title.items(i).firstChild.data;
    }

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

HTML

<!DOCTYPE html>

<html>

    <head>   
        <script src="readBlog.js"></script>
    </head>

    <body onload="loadBlog()">
        <div id="blog"></div>
    </body>

</html>

javascript

Edited 11 Years Ago by ObSys

2 Contributors
3 Replies
499 Views
7 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by JorgeM

JorgeM 958 Problem Solver

11 Years Ago

You are calling a function onload called "loadBlog()". I dont see that function anywhere in your javascript code.

You also have some issues in your xml file with regard to opening and closing tags. Some problems in your ajax block as well (you can see if you use browser dev tools). I wrote up a similar example. Take a look and see if this helps you.

HTML/Ajax

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body onload="loadAjax()">
<div id="blog"></div>
    <script type="text/javascript">
        function loadAjax() {
            var xhr = getxhr();
            if (xhr != null) {
                xhr.open("GET", "blog.xml", true);
                xhr.onreadystatechange = handler;
                xhr.send();
            }
            else {
                window.console.log("Ajax not supported.");
            }

            function getxhr() {
                if (window.XMLHttpRequest) {
                    return new window.XMLHttpRequest;
                }
                else {
                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (ex) {
                        return null;
                    }
                }
            }

            function handler() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        xmlDoc = xhr.responseXML;
                        xmlData = "";
                        x = xmlDoc.getElementsByTagName("title");
                        for (i = 0; i < x.length; i++) {
                            xmlData = xmlData + x[i].childNodes[0].nodeValue + "<br/>";
                        }
                        document.getElementById("blog").innerHTML = xmlData;
                    }
                }
            }
        }
</script>
</body>
</html>

XML File

<?xml version="1.0" encoding="iso-8859-1"?>
<blog>
  <blogPost>
    <title> Test - 1 </title>
    <text>
      this is a small tester</text>
      <author>William Ahmed</author>
      <date>16/03/93</date>
    </blogPost>
  <blogPost>
    <title> Test - 2</title>
    <text>
      this is a small tester</text>
      <author>William Ahmed</author>
      <date>16/03/93</date>
    </blogPost>
  <blogPost>
    <title> Test - 3 </title>
    <text>
      this is a small tester</text>
      <author>William Ahmed</author>
      <date>16/03/93</date>
    </blogPost>
  <blogPost>
    <title> Test - 4 </title>
    <text>
      this is a small tester</text>
      <author>William Ahmed</author>
      <date>16/03/93</date>
    </blogPost>
</blog>

Results Displayed...

Test - 1 
Test - 2
Test - 3 
Test - 4

Edited 11 Years Ago by JorgeM

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ObSys 56 Junior Poster · Answer 1 · 2013-09-18T22:09:44+00:00

Oops! the loadBlog() was from where i was messing around with it to see if I could get it to work. I've tried your way to the point of copying and pasting your code but still it won't work. I was thinking it may be my browser but I was under the impression that javascript is run natively.

If you have any ideas on any problems then let me know.

Thankyou

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 2 · 2013-09-18T23:59:02+00:00

If you are running Chrome, use Chrome's dev tools. The console will alert you of errors. Please note that I did not run this straight from my desktop (you'll get ajax cross domain warnings) ... so i uploaded it to a server.

I uploaded the example so you can take a look at the results and you can right click and click on "view source" so you can validate the code you are using vs the code I uploaded.

Web Page Demo
http://itg.somee.com/dw/dw-463470/

XML File
http://itg.somee.com/dw/dw-463470/blog.xml

Hope that helps you.