I've got some javascript code for replacing innerHTML of a element when clicked. Now i've got the code for that and it does work great! But one small issue is that, I want the webserver to remember the change when innerHTML of an element was replaced. So the webserver remembers the change and doesn't return to its default state. Whether with database or in Cookie, sessionStorage, localStorage.
document.getElementById("replace1").innerHTML = localStorage.getItem("replace1");
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
localStorage.setItem("replace1",this.responseText);
}
};
xhttp.open("GET", "https://natevanghacks.com/replacements/yoinkexecutor2.html", true);
xhttp.send();
}
Try something like this in AJAX:
localStorage.setItem("replace1",this.responseText);
And after body onload:
document.getElementById("replace1").innerHTML = localStorage.getItem("replace1");
Edit:
function loadSavedData(){
var data=localStorage.getItem("replace1");
document.getElementById("replace1").innerHTML = data?data:'No Data found';
}
function deleteData(){
localStorage.removeItem("replace1");
}
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
localStorage.setItem("replace1",this.responseText);
document.getElementById("replace1").innerHTML =this.responseText;
console.log(this.responseText);
}
};
xhttp.open("GET", "filename.html", true); //put your filename here...
xhttp.send();
}
<button onclick="loadDoc()">Send request and load Data
</button>
<button onclick="loadSavedData()">load Saved Data
</button>
<button onclick="deleteData()">Delete saved Data
</button>
<br>
<div id="replace1">
</div>
Note: You should run this file on http:// or https:// protocols only
Related
this is my second post, I hope to be luckier than last time end get some reply. 🙂
I’m trying to make a Rapidapi api request working with javascript ”XMLHttpRequest”
I must say that the api works perfectly with ios siri shortcut.
this is the code provided from apirapit site on the "XMLHttpRequest" section:
var data = null;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open("GET", "https://download-video-youtube1.p.rapidapi.com/mp3/medPORJ8KO0");
xhr.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "[my key here]");
xhr.send(data);
And this is my code:
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.withCredentials = true;
url='https://download-video-youtube1.p.rapidapi.com/mp3/xF5t2jOsCt8';
xhttp.onreadystatechange = function() {
if ((this.readyState == 4 && this.status == 200 )||(this.readyState === this.DONE)) {
document.getElementById("demo").innerHTML = "ciao" + this.responseText;
}
};
xhttp.open("GET", url);
xhttp.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
xhttp.setRequestHeader("x-rapidapi-key", "[my key here]");
xhttp.send();
}
</script>
</body>
</html>
Just to testing I created a simply bank html page to have the JSON response beneath the button just after pressing it. The result is just the string “ciao” i set before the this.responseText. If I remove the apikey or modify it with a wrong value an JSON error message appear ( so like the case posted, as I intentionally removed it).
Otherwise as said noting but “ciao” string
Is there any syntax error? Is there a logical reason why it behave like this?
Thanks
Franco
Trying adding a data variable as null. That's what RapidAPI provides in their code snippet.
function loadDoc() {
const data = null
var xhttp = new XMLHttpRequest();
xhttp.withCredentials = true;
url='https://download-video-youtube1.p.rapidapi.com/mp3/xF5t2jOsCt8';
xhttp.onreadystatechange = function() {
if ((this.readyState == 4 && this.status == 200 )||(this.readyState === this.DONE)) {
document.getElementById("demo").innerHTML = "ciao" + this.responseText;
}
};
xhttp.open("GET", URL);
xhttp.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
xhttp.setRequestHeader("x-rapidapi-key", "my key here");
xhttp.send(data);
}
I'm making my own website(https://khushit-shah.github.io/) with the help of github.dev.
Now on top of every repository, I wanted to show some content featuring the repository, which should be flexible and easily changeable. So, I created a file in repository named "repodesc.html". which contains the html to we shown!. Then using following code I am adding that html file for every repositories.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("{{ repository.id }}").innerHTML = this.responseText;
}
};
xhttp.open("GET", "https://raw.githubusercontent.com/khushit-shah/{{ repository.name }}/master/repodesc.html", true);
xhttp.send();
This adds the HTML in https://raw.githubusercontent.com/khushit-shah/Cursor.js/master/repodesc.html to my website(top of Cursor.js). But the script tag in the repodesc is not getting executed.
Code in repodesc.html
<h1 cursor-animate cursor-loop-reverse> Cursor.js </h1>
<script>
console.log("Is it working?");
js = "https://raw.githubusercontent.com/khushit-shah/Cursor.js/master/cursor-v.2.0.2.js";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
eval(this.responseText);
}
};
xhttp.open("GET", js, true);
xhttp.send();
</script>
I even tried repodesc.html
<h1 cursor-animate cursor-loop-reverse> Cursor.js </h1>
<script src="https://cdn.jsdelivr.net/gh/khushit-shah/Cursor.js#latest/cursor.v1.0.0.min.js" >
</script>
expected result : Cursor.js should be executed and the h1 tag should be animated with type writing effect!
actual result: the script in repodesc.html is not getting executed!
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.
This is my code
function load() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("change").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "https://www.example.com/xyz.txt", true);
xhttp.send();
}
The url for the xhttp.open is an example url to another domain with a txt file. What can I add to my code for this to work? Thanks.
The best way to do this is with CORS.
I'm trying to load a file and display it in the div section of my web page, using AJAX. The console output shows that the XMLHttpRequest object is successfully created, but then nothing happens: the callback function is never called and the content of the URL is not fetched.
<body>
<div id="demo"><p>Some text</p></div>
<button type="button" onclick="loadDoc()">Request URL</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
console.log('object created'); // this message is printed
} else if (window.ActiveXObject) {
xhttp = new ActiveXObject("MŃ–crosoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
console.log('inside callback function'); // this message is never printed
if(xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
xhttp.open("GET", "http://tools.ietf.org/rfc/rfc6120.txt", true);
xhttp.send(null);
};
}
console.log('end of script'); // this message is printed
</script>
</body>
I don't know much about HTTP requests and I'm assuming that AJAX can be used to load an url that is perfectly accessible to my web browser.
Is this assumption incorrect? If not, then what am I doing wrong?
Reorder your code
xhttp.onreadystatechange = function() {
console.log('inside callback function');
if(xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "http://tools.ietf.org/rfc/rfc6120.txt", true);
xhttp.send(null);
You must to send the request and the callback will be fired automatically. If you put that code inside the callback, you never achieve the request to the txt file