request.open("GET", selectedTab + ".html", true);
Will this respond me back with the whole html page or just the text part in some specific tags. If my html page has images and paragraphs, what exactly will be retured to me in my request object, and how can i use individual tags(using javacript), if it returns them all?
For example, say my html file is
<!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>
now how do i get the individual coponents of the file.
2 Answers 2
You will get just the HTML code of the file. You'll have to parse the elements yourself to pull any external files (i.e. css, js, etc)
Edited to respond to edits (x2): Your ajax request will get the HTML, but if you wanted to get the stylesheet, or picture, you would have to parse it out. For example (off the top of my head, not fully tested :)):
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
You could then make more requests to get the actual items.
If all you want is to get the various elements, then you could use the doc.getElementsByTagName("p") technique to get tags. Or there are other DOM methods that may work better depending on the HTML and context.
2 Comments
I'd recommend using the http://jquery.com/ library to help parse the returned data. For example:
<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>