JavaScript从URL读取HTML并转换为字符串

Question

我目前正在构建一个网站，它应该能够像FTP浏览器一样运行。基本上我有一个带有一些图片的FTP服务器。

我的困惑在于：如果我浏览到这个FTP站点，我可以查看FTP站点的源代码（在某些浏览器中可以看到），我需要将其保存到字符串中（使用JavaScript）。

原因是，我将制作一种“图像”浏览器。我打算通过将源代码读入字符串，然后复制所有图像源并使用innerHTML创建新的布局来实现这一点。

简而言之：我想从URL读取信息并以不同的方式显示它。

---

好吧，似乎无法使它正常工作。问题可能是我不能使用服务器端脚本。但是，如果我在FTP服务器上放置一个文件，我是否可以加载该文件以动态加载同一文件夹中的数据？（当我说FTP时，实际上是指具有FTP访问权限的NAS服务器）。

- Chizpa

---

你是否使用任何框架？例如jQuery？ - vzwick

如果我浏览此FTP站点，我可以查看FTP站点的源代码。你所看到的是基于目录列表生成的一些HTML，你看不到站点本身发送的内容。 - Quentin

Answer 1

你的答案是使用Ajax。它可以像浏览网站一样从URL POST和GET数据，并将HTML作为字符串返回。

如果你计划使用jQuery（很方便），使用Ajax很容易。像这个例子一样（没有库将无法工作）：

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

如果你想使用默认的Javascript，请看一下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();

- Niels

---

我想到的解决方案是用C#编写一个小应用程序。当你运行这个应用程序时，它会进入NAS文件夹，查找图片，并生成一个包含这些图片的HTML文件，然后我的应用程序可以在iframe中使用这个HTML页面。 - Chizpa

Answer 2

现代的基于 Promise 的 Fetch API 解决方案（不再使用 XMLHttpRequest 或 jQuery.ajax()）：

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

使用 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);
}

- qwr

Answer 3

使用JavaScript获取数据而不使用alert()：

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

- Mina Samir

Answer 4

关于Niels和rich.okelly所说的内容，我没有太多要补充的。AJAX是你的选择。

但请记住，跨域限制将禁止您访问不在同一域中的数据。您可以在这里找到可能的解决方法。

- vzwick