Managed to pull the base64 string out of the XML file with js a function but how do i display it in the browser/src attribute?? Or is there a better way!
The xml file will change so the xml photo tag image string will change. It works if i paste the text string in but need the function to update the string... if that makes sense.
<p id="demo">
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "PhotoAsXML.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("FullName")[0].childNodes[0].nodeValue + "<br>" +
xmlDoc.getElementsByTagName("Photo")[0].childNodes[0].nodeValue;
}
</script>
</p>
<img style='display:block; width:140px;height:180px;' id='base64image' src="data:image/png;base64," />
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'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
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 don't need anything fancy on this. I'm loading a Q&A page. The Q&A I want on a seperate file so I can just update the file and it will update the page the next time it's loaded by someone.
I created a file "faq.xml" and am trying to load that in to my faq.php file.
<p id="xmlp" class="content" style="text-align: center">
<!-- XML should go here -->
</p>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
myFunction(this);
xmlhttp.open("GET", "faq.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Question</th><th>Answer</th></tr>";
x = xmlDoc.getElementsByTagName("faqs")
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("question")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("answer")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("xmlp").innerHTML = table;
}
</script>
For whatever reason, it's not loading anything. The XML file currently has this...
<?xml version="1.0" encoding="UTF-8"?>
<faqs>
<question>When do you fly?</question>
<answer>We fly at sunrise weather permitting. Flights are more peaceful and the winds are great. We even fly low enough to have a conversation with those less fortunate on the ground. People tend to hang around at launch and landings to see what it’s all about.</answer>
</faqs>
Any suggestions? I'm new to XML (this is my first one).
Thank you in advanced.
I put an alert in to ensure the js was getting started and it did function.
<script>
loadXMLDoc();
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
alert();
myFunction(this);
xmlhttp.open("GET", "faq.xml", true);
xmlhttp.send();
}
Still not sure where the hold up is.
I did more testing and I think I found where at least something is wrong...
<p id="xmlp" class="content" style="text-align: center">
<!-- XML should go here -->
</p>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
myFunction(this);
xmlhttp.open("GET", "faq.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Question</th><th>Answer</th></tr>";
alert("This one works");
x = xmlDoc.getElementsByTagName("faqs")
alert("This one does not work");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("question")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("answer")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("xmlp").innerHTML = table;
}
</script>
This is a basic example of loading an xml file via AJAX from https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_xml:
<body onLoad="loadXMLDocument('someXMLfile.xml')">
<p>
<b>Status:</b> <span id="statusInfo"></span>
</p>
<p>
<b>Status text:</b><span id="statusTextInfo"></span>
</p>
<p>
<b>Response:</b> <span id="xmlContent"></span>
</p>
<script>
function loadXMLDocument(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('statusText').innerHTML = this.status;
document.getElementById('statusTextInfo').innerHTML = this.statusText;
document.getElementById('xmlContent').innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
</body>
This will load an XML file into Javascript.
Though as I mentioned, if you're getting to grips with AJAX, PHP and XML all at once
the straightforward way might be to make an AJAX call to PHP and process the xml using a php function on the server.
The 4/200 status codes make AJAX debugging a little easier.
In a given .html page , I have a script tag like so:
<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>
How can I use Beautiful Soup to get 2nd parameter in .open function?
This case is "ajax_info.txt"
BeautifulSoup is not built for this. It is built to parse html not JavaScript or any other web languages.
The easier way is to use a headless browser such as PhantomJS or Selenium
You can also parse JavaScript using regex, or without regex as described in this post
Edit:
Example:
I do not know how to use a headless browser although this is probably the best way ahead, however I do know enough regex to create a quick and dirty example that will work for the example you listed above.
b = """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();
}"""
# Get value between <script></script> using BeautifulSoup and store in "b"
import re
a = re.compile('"GET", "[\S ]+"')
c = a.search(b).group()
print(c[8:-1])