Here’s my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>News Site</title>
<script>
window.document.onload = function () {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "cdcatalog.xml", true);
xhttp.send();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
console.log(xmlDoc);
document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "<br/>" + xmlDoc.getElementsByTagName("PRICE")[0].childNodes[0].nodeValue;
} else {
document.getElementById("demo").innerHTML = "Can't show it.";
}
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
Edited: Changed the code based on the Same Origin Policy. This local file is saved in the same folder on my PC. Still not showing anything. Just for reference, here’s the actual XML file: http://www.xmlfiles.com/examples/cd_catalog.xml
I am a beginner in using Ajax and this is my first project. I checked with the format, even validated it with W3 Validator, and it doesn’t seem to work.
Nothing is showing on the page. It’s completely blank.
Can anyone point out my mistake please?
You may get some hints from the console though. ;-) Something like
Uncaught TypeError: document.getElementsById is not a function
An ID is unique, so there’s only one element with a given ID. BTW, your AJAX probably won’t work either because of the same origin policy ; you’ll have to proxy the request on your own server.
1 Like
Yes, based on your suggestion, made some edits. Still not working. Any idea?
Well do you even get a response?
As @m3g4p0p pointed out it is a same origin problem .
If you try this corrected code…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>News Site</title>
</head>
<body>
<div id="demo"></div>
<script>
(function() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
console.log('xhttp.readystate = '+this.readyState+'\nxhttp.status = '+this.status);
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue + "<br>" +
xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue;
}
}
xhttp.open("GET", "http://feeds.feedburner.com/ndtvnews-latest?format=xml", true);
xhttp.send();
}());
</script>
</body>
</html>…you will see that “console.log” shows xhttp.status=0 .
Your best bet is to use a PHP method, perhaps like this example…
<?php
$xml = simplexml_load_file('http://feeds.feedburner.com/ndtvnews-latest?format=xml');
$tle = [];
$lnk = [];
foreach($xml -> channel -> item as $node) {
foreach($node -> title as $node) {
array_push($tle, $node);
}
}
foreach($xml -> channel -> item as $node) {
foreach($node -> link as $node) {
array_push($lnk, $node);
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>News Site<</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% verdana, arial, helvetica, sans-serif;
}
h1,h2 {
font-size: 1em;
text-align: center;
}
#list {
width: 75%;
margin: auto;
padding: 1em;
border: 0.06em solid #999;
background-color: #fff;
}
#list a {
font-size: 0.8em;
}
</style>
</head>
<body>
<h1>NDTV News</h1>
<div id="list">
<?php
for ($c = 0; $c < count($tle); $c++) {
echo '<h2>' . $tle[$c] . '</h2> ';
echo '<a href="' . $lnk[$c] . '">' . $lnk[$c]. '</a>';
}
?>
</div>
</body>
</html>coothead
2 Likes
Yes, I found out it was being blocked by Same Origin Policy. And thanks for the PHP script. @m3g4p0p At last, I found out that window.document.onload() is not valid. It should have been window.onload().
@coothead It’s not working. Just made a new page. Here’s what I see.
I am sorry about that.
I only tested it on my local server and it worked OK.
After a little bit of testing I found that the problem which
$xml = simplexml_load_file('http://feeds.feedburner.com/ndtvnews-latest?format=xml');It appears that “https” must be used instead…
$xml = simplexml_load_file('https://feeds.feedburner.com/ndtvnews-latest?format=xml');You can see it working here…
http://coothead.co.uk/ndtvnews.php
coothead
1 Like
@coothead It’s looking great, I must say. Two questions:
How can PHP work? Is JS contacting the server for a response while PHP is reading it as a plain web page? Not a PHP expert here
Why are we doing $xml → $channel → items? I mean why all the chaining here?
@coothead It seems weird but it is not working at my end.
Here’s the link:
http://www.copyewriting/newssite.php
Here’s the code as you suggested.
<?php
$xml = simplexml_load_file('https://feeds.feedburner.com/ndtvnews-latest?format=xml');
$tle = [];
$lnk = [];
foreach($xml -> channel -> item as $node) {
foreach($node -> title as $node) {
array_push($tle, $node);
}
}
foreach($xml -> channel -> item as $node) {
foreach($node -> link as $node) {
array_push($lnk, $node);
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>News Site<</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% verdana, arial, helvetica, sans-serif;
}
h1,h2 {
font-size: 1em;
text-align: center;
}
#list {
width: 75%;
margin: auto;
padding: 1em;
border: 0.06em solid #999;
background-color: #fff;
}
#list a {
font-size: 0.8em;
}
</style>
</head>
<body>
<h1>NDTV News</h1>
<div id="list">
<?php
for ($c = 0; $c < count($tle); $c++) {
echo '<h2>' . $tle[$c] . '</h2> ';
echo '<a href="' . $lnk[$c] . '">' . $lnk[$c]. '</a>';
}
?>
</div>
</body>
</html>
Hi there workfreelanceron,
your link gives this…
Server not found
…can you check it out.
coothead
Hi there workfreelanceron
zip your “newssite.php” file and attach it to a post.
This will allow us to to test it it exactly.
coothead
newssite.zip (788 Bytes)
Here’s the file. The same code as I entered above. No change at all.
Hi there workfreelanceron,
as you said, it is exactly the same code,
http://coothead.co.uk/newsite.php
…which infers that you have some sort
I would suggest that you take your new problem here…
https://www.sitepoint.com/community/c/server-config
…and see what the gurus there have to say about it.
coothead
1 Like
Ah. talked with the admins over there, and SimpleXML is applicable to PHP 5.4 and above. Working now.
One question, how can SimpleXML work while Ajax can’t?
As @m3g4p0p has already pointed out, it is a same origin problem .
coothead
Hi there workfreelanceron,
you may find the answer here…
Why Same-Origin policy restricts access to Ajax but not to Php?
… to be rather more specific to your question.
coothead
Thanks @coothead it was really helpful. Checked out the link already. Turns out, it is the browser issue that separates the functioning of PHP and AJAX.
system
July 24, 2017, 3:09pm
19
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
