Question

美好的一天。

我从未真正掌握过JavaScript，因此这个不寻常且简单的问题。

如何将页面内容加载到JavaScript变量，代码量最少，没有框架，对性能影响较小？

感谢。

修改

对不起伙计们。我忘了提及：从指定的URL获取页面内容到JS var。

关注Brendan Suggestion

我已经在其他地方看到了Brendan的替代方案并尝试了它，但它当时没有用，现在它不起作用。同时Firebug和浏览器测试（IE8和FF）不报告任何错误。那怎么了？

Answer 1

这是您可以在w3schools.com找到的示例的修改版本。

<script type="text/javascript">
    function loadXMLDoc(theURL)
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari, SeaMonkey
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                alert(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET", theURL, false);
        xmlhttp.send();
    }
</script>

因此，只需将“example.html”设置为要加载的页面的任何路径（相对或绝对路径），xmlhttp.responseText将是包含响应内容的字符串。如果希望将其存储为可遍历的XML文档，也可以使用xmlhttp.responseXML。无论如何，只需将其中任何一个分配给您选择的变量，您就可以拥有它！

请注意，'loadXMLDoc'不会直接返回任何内容，而是定义其中一个成员（'onreadystatechange'）来完成该工作，并且仅在某些条件下（readyState和status）执行此操作。结论 - 不要将此函数的输出分配给任何var。而是做类似的事情：

var xmlhttp=false;
loadXMLDoc('http://myhost/mycontent.htmlpart');
if(xmlhttp==false){ /* set timeout or alert() */ }
else { /* assign `xmlhttp.responseText` to some var */ }

没有它，所有人都可以看到'未定义'......

Answer 2

要获取html标记内的所有内容：

var html = document.getElementsByTagName('html')[0];
var text = html.innerHTML;

然后你可以将它包装在html标签中。不捕获doctype或html标记之外的任何其他内容，但它是获取大部分内容的快捷方式。

Answer 3

我知道这个问题现在已经很老了，但我在尝试将页面内容变成变量时遇到了同样的问题，但最终在Javascript中找到了一种方法：D（在互联网的帮助下... 。）

所以这就是......

我使用回调函数来获得所需的页面：

function getPageContents(callback,url,params) {
    http=new XMLHttpRequest();
    if(params!=null) {
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    } else {
        http.open("GET", url, true);
    }
    http.onreadystatechange = function() {
        if(http.readyState == 4 && http.status == 200) {
            callback(http.responseText);
        }
    }
    http.send(params);
}

请注意，我已经以这样的方式做到了，它不会接受GET参数。这是故意的，因为我不需要在我的应用程序中使用GET。如果设置了params，它们将作为POST发送。

然后使用该函数，假设我想将一个名称发布到findpersoninfo.php，它将输出该人员信息的JSON数组，我可以这样做：

getPageContents(function(result) {
    personinfo=JSON.parse(result);
    //Now I can do anything here with the personinfo array
},'http://localhost/findpersoniinfo.php','fname=stretch&lname=wright')

更进一步，你可以将它嵌套在另一个函数中，让我们调用它getPersonInfo()：

function getPersonInfo(fname,lname) {
    getPageContents(function(result) {
        personinfo=JSON.parse(result);
        //Now I can do anything here with the personinfo array
    },'http://localhost/findpersoninfo.php','fname='+fname+'&lname='+lname)
}

当然，我对Javascript的了解还处于初期阶段，并欢迎任何有建设性的反馈：D

Answer 4

从/v1/data?format=json

等网址下载JSON数据的简单解决方案

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", "/v1/data?format=json", false);
xmlhttp.send();
var data = JSON.parse(xmlhttp.responseText);

将页面内容加载到变量

4 个答案: