26

I'm currently building a site that should be able to function as a ftp sort of browser. Basically what I have is a ftp server with some images on it.

What I can't figure out is: if I browse to this ftp site I can view the source of the ftp site (as seen in some browser), what I need is to save that source in a way to a string (using javascript).

The reason is, that I will make som kind of 'image' browser. I plan on accomplishing that by reading the source into a string, then copy all the image sources and use innerHTML to create a new layout.

In short: I want to read information from a url and display it in a different way.


Well, can't seem to get it working. The problem might be that I cannot use serverside scripting. Would it be possible however to put a file on the ftp server that I can load that can dynamically load the data in the same folder? (when I say FTP I actually mean a NAS server with FTP access).

2
  • Are you using any sort of framework? I.E. jQuery? Commented Nov 19, 2011 at 22:12
  • " if I browse to this ftp site I can view the source of the ftp site" — What you see is some HTML generated by the browser based on the directory listing, you don't see what the site itself sends. Commented Nov 20, 2011 at 8:45

4 Answers 4

36

Your answer is Ajax. It can POST and GET data from an URL, just like browsing a website, and it will return the HTML as a string.

If you plan on using jQuery (real handy), it is easy to use Ajax. Like this example (does not work without the library):

$.ajax({
    url : "/mysite/file.html",
    success : function(result){
        alert(result);
    }
});

If you want to use default Javascript, take a look at http://www.w3schools.com/ajax/default.asp

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
Sign up to request clarification or add additional context in comments.

1 Comment

Well the solution I have come up with is to write a small application in C#. When You run the application it enters the NAS folder, looks for images, and generates a html file (containing the images), then my app is able to use that html page in an iframe.
4

Modern Promise-based Fetch API solution (no more XMLHttpRequest or jQuery.ajax()):

fetch('data.txt')
  .then(response => response.text())
  .then(data => console.log(data));

Example using async/await:

async function myFetch() {
  let response = await fetch('data.txt');

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  let text = await response.text(); // await ensures variable has fulfilled Promise
  console.log(text);
}

Comments

1

There's not much to add to what Niels and rich.okelly have said. AJAX is your way to go.

Keep in mind though, that cross-domain restrictions will prohibit you to access data that is not in the same domain. You'll find a possible workaround here.

Comments

1

IN Javascript to get data without using alert() :

    $.ajax({
    url : "/mysite/file.html",
    async:false,            //this is the trick
    success : function(result){
                 //does any action
               } 
    });

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.