www.webdeveloper.com
Results 1 to 7 of 7

Thread: AJAX doesn't return data from XML

  1. #1
    Join Date
    Jan 2014
    Posts
    9

    Angry AJAX doesn't return data from XML

    Hey

    I'm supposed to load XML data to HTML tags on my website without using jQuery
    Code:
    function titleTopic(url)
    {
    var xmlhttp;
    var txt,txt2,xxx,xx,x;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    x=xmlhttp.responseXML.documentElement.getElementsB yTagName("ARTICLE");
    
    xx=x[0].getElementsByTagName("TITLE");
    txt=xx[0].firstChild.nodeValue;
    xxx=x[0].getElementsByTagName("AUTHOR");
    txt2=xxx[0].firstChild.nodeValue;
    
    
    document.getElementByTagName('h3').innerHTML=txt;
    document.getElementByTagName('span').innerHTML=txt 2;
    }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    }
    This code is triggered by a button:
    <button onclick="titleTopic('webdesign.xml')">Get XML data</button>

    Can someone tell me what i am doing wrong?

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,519
    Wut?

    x=xmlhttp.responseXML.documentElement.getElementsB yTagName("ARTICLE");

    ??? does not compute!

    if xmlhttp is your AJAX object and you want the responseXML property to be assigned to a document element...

    yourtarget = xmlhttp.responseXML;

    where yourtarget is the object you are trying to access and update with the XML data.

    which in your case deciphering your code...

    x=document.getElementsByTagName("ARTICLE");

    x[0].innerHTML = xmlhttp.responseXML;

    or something in that sort of area, have no idea because you have not supplied anything other than the javascript and nothing about the elements you are trying to add or amend.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Jan 2014
    Posts
    9
    Ok
    Idk where the problem is, i tried w3schools example and just altered the tag names to my xml file and changed the function name as well - didn't work, neither did some example tutorial i tried
    I changed the code here is how it looks like - AJAX: moje.js
    Code:
    var xmlHttp = createXmlHttpRequestObject();
    
    //create object
    function createXmlHttpRequestObject() {
    	var xmlHttp;
    	if (window.XMLHttpRequest){
    		xmlHttp = new XLHttpRequest();
    	} else {
    		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	return xmlHttp;
    }
    
    //called onload
    
    function process() {
    	if(xmlHttp) {
    		try{
    			xmlHttp.open("GET", "webdesign.xml", true);
    			xmlHttp.onreadystatechange = handleStateChange;
    			xmlHttp.send(null);
    		}
    		catch(e) {
    			alert(e.toString());
    		}
    }
    
    //when state changes
    function handleStateChanges() {
    	id(xmlHttp.readyState==4) {
    		if(xmlHttp.status==200) {
    			try {
    				handleResponse();
    				
    			}
    			catch(e) {
    				alert(e.toString());
    			}
    		} else {
    			alert(xmlHttp.statusText);
    		}
    	}
    }
     //handle the response from the server
     function handleResponse() {
    	var xmlResponse = xmlHttp.responseXML;
    	root = xmlResponse.documentElement;
    	articles = root.getElementsByTagName("TITLE");
    	authors = root.getElementsByTagName("AUTHOR");
    	
    	var stuff = "";
    	for (var i=0; i<articles.length; i++) {
    		stuff = articles.item(i).firstChild.data + " - " + authors.item(i).firstChild.data + "<br/>";
    		
    	}
    	super2 = document.getElementByID("super2");
    	super2.innerHtml = stuff;
     }
    The XML: what im trying to do is to loop throug it and display all authors and titles in an article in my html: webdesign.xml
    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!-- Edited by XMLSpy® -->
    <RESPONSE>
    	<TOPICS>
    		<ARTICLE>
    			<TITLE>The Lean UX Manifesto: Principle-Driven Design</TITLE>
    			<AUTHOR>Anthony Viviano</AUTHOR>
    			<YEAR>2014</YEAR>
    			<TEXT>My colleague Ajay and I have been working at incorporating lean UX at the enterprise level for over two years. In studying it, I find that there is a temptation to lay down rules, and if the rules arent followed. well, then, you cant call it lean UX. At the end of the day, though, some lean UX is better than none.</TEXT>
    		</ARTICLE>
    		<ARTICLE>
    			<TITLE>Killer Responsive Layouts With CSS Regions</TITLE>
    			<AUTHOR>CJ Gammon<AUTHOR>
    			<YEAR>2013</YEAR>
    			<TEXT>As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option.</TEXT>
    		</ARTICLE>
    		<ARTICLE>
    			<TITLE>Original And Innovative Web Layouts</TITLE>
    			<AUTHOR>Shavaughn Haack</AUTHOR>
    			<YEAR>2013</YEAR>
    			<TEXT>The layout is the foundation of your website. It guides the user through the sections and tells them what is most important. It also sets the aesthetic of the website. Therefore, you need to carefully think through how you lay out content.</TEXT>
    		</ARTICLE>
    	</TOPICS>
    </RESPONSE>
    And the html element:
    Code:
    		<article id='super2'>
    		<button onclick="process()">Get XML data</button>
    
    		</article>
    So im basically calling the process function here, it should return the data but nothing happens
    I have the javascript file attached to html <script type="text/javascript" src="moje.js"></script> there should be no problem

  4. #4
    Join Date
    Jan 2014
    Posts
    9
    i have a typo there in javascript file it says 'is' instead of 'if', fixed it but it didn't help

  5. #5
    Join Date
    Jan 2014
    Posts
    9
    I've run the website on chrome console it gives two errors:
    Uncaught SyntaxError: Unexpected end of input for line 1 of moje.js
    Uncaught ReferenceError: process is not defined for line 71 of webdesign.html which is basically the button with process() function

  6. #6
    Join Date
    Jan 2014
    Posts
    9
    ok, i kind of made stupid mistake and fixed it, i lacked one curly bracket that's it and started getting error alerts
    but i get an error from xml I found it and fixed it but it was still the same, i realized it's not updateing my xml file so i changed it's name after i fixed it.
    It helped no more errors but there's still noting displayed.
    <?xml version="1.0" encoding="ISO-8859-1"?>

    <RESPONSE>
    <TOPICS>
    <ARTICLE>
    <TITLE>The Lean UX Manifesto: Principle-Driven Design</TITLE>
    <AUTHOR>Anthony Viviano</AUTHOR>
    <YEAR>2014</YEAR>
    <TEXT>My colleague Ajay and I have been working at incorporating lean UX at the enterprise level for over two years. In studying it, I find that there is a temptation to lay down rules, and if the rules arent followed. well, then, you cant call it lean UX. At the end of the day, though, some lean UX is better than none.</TEXT>
    </ARTICLE>
    <ARTICLE>
    <TITLE>Killer Responsive Layouts With CSS Regions</TITLE>
    <AUTHOR>CJ Gammon </AUTHOR>
    <YEAR>2013</YEAR>
    <TEXT>As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option.</TEXT>
    </ARTICLE>
    <ARTICLE>
    <TITLE>Original And Innovative Web Layouts</TITLE>
    <AUTHOR> Shavaughn Haack </AUTHOR>
    <YEAR>2013</YEAR>
    <TEXT>The layout is the foundation of your website. It guides the user through the sections and tells them what is most important. It also sets the aesthetic of the website. Therefore, you need to carefully think through how you lay out content.</TEXT>
    </ARTICLE>

    </TOPICS>
    </RESPONSE>

  7. #7
    Join Date
    Jan 2014
    Posts
    9
    ok fixed it, i just needed a monologue i guess xD

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles