AJAX XMLHttpRequest Object - javascript

I have been working with script from w3schools. I would like the ajax_info.txt file to appear as the page loads instead of with the button click. I've seen this question before, but can't find the answer again after a couple of days of looking. I pre-apologize for this idiotic question.
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>

Related

How can I retrieve data from a external URL to show in my webpage?

As a learning exercise I'm trying to retrieve the track_artist_name from a url used by a radio sation to show the song being played.
This could be a case of "Same-Origin-Policy" but I dont have enough knowledge to tell.
Could someone please help me to workaround the conflict ? Also, I know "this.responseText" will show everything, I will try to filter it once I can retrieve the Data, but if you feel generous and want to trow me also that bone, I will be really grateful to you. Thank you : )
<html>
<body>
<div id="data">
</div>
<button type="button" onclick="loadXMLDoc()">Get Data</button>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("data").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://np.tritondigital.com/public/nowplaying?mountName=XERC_FM&numberToFetch=1", true);
xhttp.send();
}
</script>
</body>
</html>

Load clicked URLs from AJAX loaded page

I have the following code which fetches content from another page using AJAX:
<div id="content">
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("content").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/Home/", true);
xhttp.send();
}
</script>
It works! Sadly, when you click on an URL from that page, all of the already loaded code disapears. :(
So my question is:
How can I make the clicked URLs load inside my DIV (content)?
Cheers.

AJAX can't load JavaScript in another page

Why can't AJAX load another HTML page with JavaScript? It loads HTML,CSS,PHP etc... but not JavaScript. Is AJAX supposed to work like that? If so how can I load another HTML page that contains JS with AJAX?
A simple example what I mean
a.php
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "b.php", true);
xhttp.send();
}
</script>
</body>
</html>
b.php
<!DOCTYPE html>
<html>
<body>
<h1>b</h1>
<script>
document.write("Hello World!");
</script>
</body>
</html>
Screenshot of response:
Because the javascript code you'll get via ajax is a simple string and not executed. You have to eval() the code in the script tag like:
Example:
<script id="helloworld">
document.write("Hello World!");
</script>
JS:
var jsCode = document.getElementById('helloworld').textContent;
eval(jsCode);
Edit by request:
if (this.readyState == 4 && this.status == 200) {
var demoElement = document.getElementById("demo");
demoElement.innerHTML = this.responseText;
var scriptTags = demoElement.getElementsByTagName('script');
for(i = 0; i < scriptTags.length; i++) {
eval(scriptTag[i].textContent);
}
}

Why jquery is not working inside ajax function ?

Why doesn't jquery work within ajax method?
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$('#demo').html('Hello World');
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
now here
$('#demo').html('Hello World');
it's not working.
but this does
document.getElementById("demo").innerHTML = 'asas';
why ? What could bt the reason. I have tried to change id to class but no luck.
Try adding in jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Right before the </body> tag.
As #31piy mentions in his comment, you can use jQuery's ajax functions like this:
<script>
$(function() {
$(document).on('click', 'button', function (event) {
event.preventDefault();
$.get('ajax_info.txt', '', function(response, textStatus) {
$('#demo').html('Hello World');
});
});
});
</script>

How can I have a double Ajax request?

I have a problem: I'd like to have a double Ajax request, but I can't.
For example I have a page in PHP (rand.php) which returns a random number.
Code:
<?php
$rand = rand(0,10);
echo $rand;
?>
In an other page I want to create an Ajax request which get a random number from rand.php twice and write it in different div.
<head>
<script type="text/javascript">
http = new XMLHttpRequest;
function rando(div){
http.onreadystatechange = function(){
if (http.readyState == 4 && http.status == 200){
document.getElementById(div).innerHTML = http.responseText;
}
}
http.open("GET","rand.php",true);
http.send();
}
</script>
</head>
<body>
<div id="div1"></div><br />
<div id="div2"></div><br />
<button onclick="rando('div1');rando('div2')">Randomize!</button>
</body>
It doesn't work. Help me, please!
Yeah, as others have pointed out, your http is shared between all callers to rando. You should create a new one inside rando.
As an aside, that wont work on all browsers. You need to create a different type of http request object on early versions of Internet Explorer.
You have to initialize XMLHttpRequest every time you want to call rand.php:
<head>
<script type="text/javascript">
function rando(div)
{
var http = new XMLHttpRequest;
http.onreadystatechange = function()
{
if (http.readyState == 4 && http.status == 200) {
document.getElementById(div).innerHTML = http.responseText;
}
}
http.open("GET","rand.php",true);
http.send();
}
</script>
</head>
<body>
<div id="div1"></div><br />
<div id="div2"></div><br />
<button onclick="rando('div1');rando('div2')">Randomize!</button>
</body>

Categories

Resources