Working in HTML/SCSS/JQUERY.
Want to link to a webpage but if it's a broken link that it will load the saved .mht version.
Another user provided this code in other thread of this forum to chek if a link is broken (JavaScript/jQuery check broken links)
function urlExists(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
callback(xhr.status < 400);
}
};
xhr.open('HEAD', url);
xhr.send();
}
urlExists(someUrl, function(exists) {
console.log('"%s" exists?', someUrl, exists);
Related
I have been trying to use the XMLHttpRequest to read a text file and display the text. The text file I is going to be linked externally. So far I have the following code
<!DOCTYPE html>
<html>
<body>
<h2>Using the XMLHttpRequest object</h2>
<script>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", XMLHttpRequest.txt, true);
</script>
</script>
</body>
</html>
I do not see my text file showing up and I am completely lost. I looked around on stack overflow already for answers and I did not find anything.
You haven't specified where your text file is located.
Here's an example of a working XMLHttpRequest with a remote api (not a real api endpoint, just an example url). You could adapt this to use a text file instead of json. Remember to call your function in the end! findCity( city ) for instance.
function findCity(elem) {
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("city").value = xmlhttp.responseText;
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", "https://api.example.com/api/postcodes.json?pnr=" + elem.value + '&clientUrl=http://localhost', true);
xmlhttp.send();
}
I can have the user upload a file on a webpage using <input type='file' accept='text/plain' onchange='ReadTheTextfile(event)'>.
and then use javascript: FileReader,
reader.readAsText(event.target.files[0]); etc
but I already know that I want to read a file, which I already uploaded to the webserver.
How can I determine by myself which file I want to upload / read ? XMLHttpRequest ?
I don't want to read a file from the user's pc.
I want to read a file from the server, where my html files are also hosted.
You can retrive it via ajax call as follows.
function getFileFromServer(url, doneCallback) {
var xhr;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("GET", url, true);
xhr.send();
function handleStateChange() {
if (xhr.readyState === 4) {
doneCallback(xhr.status == 200 ? xhr.responseText : null);
}
}
}
getFileFromServer("path/to/file", function(text) {
if (text === null) {
// An error occurred
}
else {
// `text` is the file text
}
});
Reference - https://stackoverflow.com/a/13329900/9640177
I want to wait for the XHR to open after I continue with the program but synchronous XHR is deprecated in chrome api. How can I get around this?
Using a callback to continue execution seems like the best method. Without a clear example of your project here's a generalized option:
function performRequest() {
// ... Some code
var xhr = new XMLHttpRequest();
xhr.open("GET", "/bar/foo.txt", true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
useRequest(xhr.responseText);
}
};
}
function useRequest(data) {
// Continue with your application
}
performRequest();
Is AJAX allowed between files that are inside the same app project?
Is this allowed in the 5 main browsers?
Should I use any specific header, or any $.ajax(~) special property to specify my intentions?
I will use Phonegap, by the way.
Thank you a lot.
Yes. Your app runs a local website on your device. Relative file urls work fine
xhr = new XMLHttpRequest();
xhr.open('GET', 'page.html', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
xhr.status === 200 ? success() : failure();
}
};
xhr.send();
I have some ajax code in an html doc that changes the text of a button to text stored in another html doc in the same domain. The text is in the body tag of the second html document.Like this:
<body> Text</body>
So the code makes an ajax request, parses the response to create an xmldoc. When I try to use the
getElementByTagName("body") or even getElementByTagName("html")
I get an emepty HTMLcollection. But when I use the
queryselector("body") I can get to the text. The log to console prints undefined.
Here's the full code:
function gettxt()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://localhost/ajax2.html", true);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState === 4) {
if (xmlhttp.status === 200)
{
allText = xmlhttp.responseText;
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(allText, "application/xml");
var bodyobj=xmlDoc.getElementsByTagName("body");
console.log(bodyobj.lemgth);
document.getElementById("secbtn").value=bodyobj;
}
}
}
xmlhttp.send(null);
}
What am I missing? Thanks.
I know what I was doing wrong. I was setting the button's text to bodyobj instead of bodyobj[0].innerHTML.