Javascript read html from url into string

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).

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):

    url : "/mysite/file.html",
    success : function(result){

If you want to use default Javascript, take a look at

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;
}"GET", "ajax_info.txt", true);

IN Javascript to get data without using alert() :

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

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

Read More:   jQuery: Hide element on click anywhere else apart of the element [duplicate]

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.

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

  .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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts