Javascript 将 html 从 url 读入字符串答案

【问题标题】：Javascript read html from url into stringJavascript 将 html 从 url 读入字符串
【发布时间】：2012-01-02 02:52:04
【问题描述】：

我目前正在构建一个应该能够用作 ftp 浏览器的站点。基本上我有一个 ftp 服务器，上面有一些图像。

我想不通的是：如果我浏览到这个 ftp 站点，我可以查看 ftp 站点的源（如在某些浏览器中所见），我需要以某种方式将该源保存为字符串（使用 javascript）。

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

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

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

【问题讨论】：

你在使用任何类型的框架吗？ IE。 jQuery?
" 如果我浏览到这个 ftp 站点，我可以查看 ftp 站点的源代码" — 你看到的是浏览器根据目录列表生成的一些 HTML，你看不到什么网站本身发送。

标签： javascript html variables ftp

【解决方案1】：

Niels 和rich.okelly 所说的话没有什么可补充的。 AJAX 是您的理想之选。

但请记住，跨域限制将禁止您访问数据 that is not in the same domain. You'll find a possible workaround here.

【讨论】：

【解决方案2】：

您的答案是 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();

【讨论】：

嗯，我想出的解决方案是用 C# 编写一个小应用程序。当您运行应用程序时，它会进入 NAS 文件夹，查找图像并生成一个 html 文件（包含图像），然后我的应用程序就可以在 iframe 中使用该 html 页面。

【解决方案3】：

在 Javascript 中不使用 alert() 获取数据：

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

【讨论】：

【解决方案4】：

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

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

使用异步/等待的示例：

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

【讨论】：