I am currently working on creating a News Ticker that utilizes PHP, Javascript, and AJAX. The first step involved creating a PHP function called getFeed(), which gathers data from various news websites into an Array. This data is then returned in JSON format using the code:
echo json_encode($articles, true);Next, I plan to use AJAX and Javascript to make repetitive calls to the getFeed() function. Here is the javascript code snippet:
<script type="text/javasript">
var xmlhttp=false;
function begin() {
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200){
var jsonContent=JSON.parse(this.responseText);
displayT(jsonContent);
}
};
// rssnews.inc.php contains the getFeed() function
xmlhttp.open('GET','rssnews.inc.php', true);
xmlhttp.send();
}
// displayT(content) function displays the JSON elements
function displayT(content){
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '<h4><a href="' + arr[i].link+ '">' +
arr[i].title + '</a></h4><br>';
}
document.getElementById('item').innerHTML = out;
}
</script>
My HTML page consists of a button (id="start") which triggers the begin() function when clicked, a div container (id="Ticker"), and another div (id="item") where the fetched data is displayed with AJAX.
<form>
<button type="submit" class="btn btn-default" id="start" onclick="begin();"> START </button>
</form>
<div id= "ticker" style="border: 1px solid #ccc; height: 500px; weight:600px;">
<div id="item">
<!-- Currently aiming to display the fetched data by 4 items at specific time intervals-->
</div>
</div>
However, upon clicking the start button, I encounter issues with receiving the JSON data.
I would appreciate any guidance on resolving this problem and determining if AJAX calls are the best approach for my News Ticker project. Thank you!