Question

request.open("GET", selectedTab + ".html", true);

这会回复整个html页面还是仅回复某些特定标签中的文本部分。如果我的html页面有图像和段落，那么在我的请求对象中究竟会向我发送什么内容，以及如何使用单个标签（使用javacript），如果它们全部返回？

例如，假设我的html文件是

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” 
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>    
<link type="text/css" href="something" rel="stylesheet">
</head>
<body>
<p>hello</p>
<img src="something.jpg" />
</body>
</html>

现在如何获取该文件的各个组成部分。

Answer 1

您将只获得该文件的HTML代码。您必须自己解析元素以提取任何外部文件（即css，js等）

编辑回复编辑（x2）：您的ajax请求将获取HTML，但如果您想获取样式表或图片，则必须解析它。例如（在我的头顶，未完全测试:)）：

var iframe = document.createElement("iframe"); //creating dummy iframe to load html into in order to parse it. DOMParser is another option;
iframe.innerHTML = response; //assuming response is the variable you stored the responseText from the AJAX request
var doc = iframe.contentDocument //get the document property of the iframe
var url = doc.getElementsByTagName("link")[0].href; //gets url of stylesheet
var img = doc.getElementsByTagName("img")[0].src; //gets url of img

然后，您可以提出更多请求以获取实际项目。

如果您只想获得各种元素，那么您可以使用doc.getElementsByTagName("p")技术来获取标记。或者根据HTML和上下文，还有其他DOM方法可以更好地工作。

Answer 2

我建议使用http://jquery.com/库来帮助解析返回的数据。例如：

<script type="text/javascript">

$(function() { // just a document.ready wrapper
    $.get(selectedTab + ".html", function(data) {
        var parsedData = $(data);
        var specificValue = $("#someID", parsedData); // any CSS selector will work in place of #someID
    });
});

</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

异步请求

2 个答案: