/    Sign up×
Community /Pin to ProfileBookmark

Question on create simple call

Whats the best way to put together a simple webpage that contains a javascript code that calls an ajax function to retrieve some data and finally display that data in the simple webpage.

currently I only have

[code]<!DOCTYPE html>
<html>
<body>

<div id=”demo”>
<h2>AJAX Text</h2>
<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”, “ajax_info.txt”, true);
xhttp.send();
}
</script>

</body>
</html>[/code]

to post a comment

9 Comments(s)

Copy linkTweet thisAlerts:
@daveyerwinAug 12.2020 — we all know that innerHTML is not good for

adding elements to page though it is fine for

getting text From page.

here is a novel way to add content to a web page

that uses createElement, createTextNode and setAttribute

using your code, check it out then ask me questions

https://unitedriverside.com/ajax/
Copy linkTweet thisAlerts:
@soupiiauthorAug 12.2020 — Thanks, can you send me the code for these two pages please, where are you pulling the text "The table header" from?
Copy linkTweet thisAlerts:
@daveyerwinAug 12.2020 — I have another code very similar to what is on the web page.

It is also JavaScript and it can read any Valid HTML and convert

it to an object. I then JSON.sringify the object and store that

on the web site,
Copy linkTweet thisAlerts:
@soupiiauthorAug 13.2020 — can you send me those files so i can play around with them [email protected] ty
Copy linkTweet thisAlerts:
@SempervivumAug 13.2020 — we all know that innerHTML is not good for

adding elements to page[/quote]
As far as I'm concerned: I do **not**. Do you have any support for that claim? Millions of webdevs around the world are happy with inserting content by innerHTML.
Copy linkTweet thisAlerts:
@daveyerwinAug 13.2020 — @Sempervivum#1622077 said ...

Do you have any support for that claim?

@Sempervivum#1622077 said ...

Obviously javascript is not executed when inserted by innerHTML:

https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml

Problem is that the code inside the <script> tag doesn't get executed.

The solutions given there are fairly complex
Copy linkTweet thisAlerts:
@soupiiauthorAug 14.2020 — Last question, How would I add error handling to this?

<!DOCTYPE html>

<html>

<body>

<div id="demo">

<h2>AJAX Task</h2>

<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", "text.txt", true);

xhttp.send();

}

</script>

</body>

</html>
Copy linkTweet thisAlerts:
@SempervivumAug 14.2020 — I recommend switching to the fetch API which is easier to use. Look here:

https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
Copy linkTweet thisAlerts:
@daveyerwinAug 14.2020 — @soupii#1622123 said...

How would I add error handling

- - - - - - - -


``<i>
</i>xhttp.onreadystatechange = function() {
var el = document.getElementById("demo");
if (this.readyState == 4){
if ( this.status == 200){
el.innerHTML = this.responseText;
} else {
el.innerHTML = "Sorry, the Request Failed. Please try again."
}
};
}<i>
</i>
``
×

Success!

Help @soupii spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...