Sign in to follow this  
Followers 0
Daniel On The Web

XML DOM Problem

6 posts in this topic

Hello and thank you all for bringing me into this forum. I would want to make a website about video games with news, articles, login system, etc., and I'm learning to make it with W3Schools.
My issue is with the XML DOM. I tried to use JavaScript to add XML data (in the form of a news list) to my HTML page, so I used the following JavaScript code:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    newsDisplay(xhttp);
    }
};
xhttp.open("GET", "news.xml", true);
xhttp.send();
 
function newsDisplay(xml) {
    var xmlDoc, maxNews, txt, titles, dates;
xmlDoc = xml.responseXML;
maxNews = 5;
txt = "";
titles = xmlDoc.getElementsByTagName("title");
dates = xmlDoc.getElementsByTagName("date");
for (i = 0; i < maxNews; i++) {
 txt += '<a href="news/news_' + + '.html"><div class="news_block">' +
 '<div class="news_title">Noticia' + titles[i].childNodes[0].nodeValue + '</div>' +
 '<div class="news_date">Fecha' + dates[i].childNodes[0].nodeValue + '</div></div></a>';
}
document.getElementById("news").innerHTML = txt;
}

Being:

  • news.xml the file where the news come from, with the <title> and <date> tags in each of the news
  • maxNews the number of news to show in the list (from the first ones in the XML)

But when I test my web page, the console says: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

.

Thank you for any help.

Share this post


Link to post
Share on other sites

You probably should run this on a server. Local AJAX requests are blocked by some browsers for security reasons.

 

If your code is not

xhttp.open("GET", "news.xml", true);

but rather

xhttp.open("GET", "http://example.com/news.xml", true);

then this is not permitted, you can only access files on your site's domain name.

 

There's only one way to load files from example.com with AJAX, and that's by configuring the example.com server to send an Access-Control-Allow-Origin HTTP header.

Share this post


Link to post
Share on other sites

 

You probably should run this on a server. Local AJAX requests are blocked by some browsers for security reasons.

If your code is not

xhttp.open("GET", "news.xml", true);

but rather

xhttp.open("GET", "http://example.com/news.xml", true);

then this is not permitted, you can only access files on your site's domain name.

There's only one way to load files from example.com with AJAX, and that's by configuring the example.com server to send an Access-Control-Allow-Origin HTTP header.

 

So I should create a server using a domain, and then configure it to send an Access-Control-Allow-Origin HTTP header. Am I right?

Share this post


Link to post
Share on other sites

No, the access control header is not necessary if the XML file is on the same server as the page that is requesting it.

 

All you need to do is have both files on a server. Download XAMPP or something similar and set up a test server on your own computer.

Share this post


Link to post
Share on other sites

So, in order to solve the issue, I have to:

  • Download XAMPP or something similar and set up a test server on my own computer.
  • Make sure the page and the XML are both in that server.

I have downloaded XAMPP, but now the question is, how do I create my test server?

Edited by Daniel On The Web

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0