How to display the xml content in the browser - javascript

I have a variable in my JavaScript and I have retrieved and stored a huge XML content in this variable like
var content = ""
the content variable will hold huge XML content.
From my same JavaScript file, I am opening a new window using
var mywindow = window.open("\test.html")
and I am using document.write like
mywindow.document.write(content)
to display the stored XML content in the new window.
I am not using any XSLT or any other style sheet in my JavaScript file.
The content is loaded in the window, however the XML content is not loaded in the browser properly, I can see the exact content when I see the source of the page.
How to display the XML content in the browser directly?

try this ,
xmlhttp.open("GET","yourfile.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
<script type="text/javascript">
var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange= function() {
if (this.readyState===4 || this.status===200)
populateTable(this.responseXML);
};
xhr.open('GET', 'yourfile.xml', true);
xhr.send();
function populate(xml) {
var content= xml;
myElem.innerHTML += content;
};
</script>

document.write() will actually create the tags of your XML data rather than displaying it as raw text.
Something like this should work:
var xml = '<hello>world</hello>';
if (document.body.innerText !== undefined) {
document.body.innerText = xml;
}
else {
document.body.textContent = xml;
}

Related

How to get HTML from AJAX Table

I'm using XMLHttpRequest to pull down the HTML from a specified URL, then stored it in fshtml. I then used:
function showInWindow(fshtml) {
var newWindow = window.open();
newWindow.document.write(fshtml);
}
To display all the HTML in a new window. But the HTML does not contain any of the code from the AJAX table in the middle of the page, which is what I want to access. Is there a way to use XMLHttpRequest to include the static version of the AJAX table HTML in xhr.responseText?
EDIT: This code pulls down html from the website:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.flashscore.com/basketball/", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
return showInWindow(xhr.responseText);
}
}
xhr.send();
The new window had HTML for all the headers and tabs and such, but there didn't appear to be any table data. Hope this helps.

grabbing content from a html page

I was wondering if there's a way to grab contents of a html file in titanium, just like with an xml file. For example with an xml file I could create a httpclient when I was grabbing content, like so:
var metaDataURL="some_xmlfile";
var xhr=Titanium.Network.createHTTPClient();
xhr.open('GET',metaDataURL);
xhr.send();
xhr.onload=function(){
alert("loaded");
}
xhr.onerror = function(e) {
alert(e.error);
};
The url I need information from is:
http://50.7.242.154:8070/7.html
All that's in there is some numbers and the name of a song and artist. Is there any way I can do this?
You use it the same way, you just GET-ting the file from the server. Essentially downloading.
var xhr=Titanium.Network.createHTTPClient({
onload : function(e) {
var htmlresponse = this.responseText;
// Do what you want with the HTML now
}
});
xhr.open('GET','http://50.7.242.154:8070/7.html');
xhr.send();

document.documentElement function does not display proper result

I am trying to parse XML file using java-script. According to the tutorial I read I found That To get the Root element, I have to use document.documentElement.
I use that syntax but when I tried to display the returned value from that Syntax, the browser displays [object HTMLHtmlElement].
My question is: (1) Why I am getting [object HTMLHtmlElement] displayed in the web browser.
(2) According to the below posted XML-File, What should I expect the output to be
after usingrootElement = document.documentElement;
Please find below the code I used(Javascript) and the XML file.
Javascript
function findWriter()
{
var schriftstellerKnoten, SpracheKnoten;
var FuellerKnoten, DichtungKnoten, Anzeige, rootElement;
rootElement = document.documentElement;
document.write(rootElement);
}
XML file:
<?xml version="1.0" ?>
<Schriftsteller>
<Englischsprache>
<Dichtung>
<fueller>
<name>Jane Austin</name>
<name>Rex Stout</name>
<name>Dashiell Hammett</name>
</fueller>
</Dichtung>
</Englischsprache>
</Schriftsteller>
document.documentElement will get you the root HTML tag of the page in which your javascript is present.
To fetch and display the XML content, you must get access to the XML document and then use it to load the XML file like the following:
function findWriter()
{
var schriftstellerKnoten, SpracheKnoten;
var FuellerKnoten, DichtungKnoten, Anzeige, rootElement;
if (window.XMLHttpRequest){
xhttp=new XMLHttpRequest(); //For non IE browsers
}
else { // for IE 5/6
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","test.xml",false);
xhttp.send();
xmlDoc=xhttp.responseXML; //Fetch the XML file contents
var nameEl = xmlDoc.documentElement.getElementsByTagName("name"); //Get all <name> tags in it
for (i=0; i<nameEl.length; i++){
document.write("Name" + i + ": " + nameEl[i].firstChild.nodeValue + "<br/>"); //write names
}
}

HTML entities not recognized and not displayed when retrieved from ajax

This happens in all tested browsers (Chrome, Firefox, Opera ...)
Some HTML entities are are swallowed and not displayed when retrieved from ajax. The same HTML entity is displayed when it is hardcoded in the HTML source file.
Here is the actual output: (the entity is not display nether in the web page nor in the console)
Here is the expected output:
Here is the javascript that retrieves the entity:
<html><head><script type="text/javascript"> function injectEntity(){ var xhr = new XMLHttpRequest(); xhr.open("POST", "entity.php", true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ var doc = xhr.responseXML; console.log(xhr.responseText); var div = document.getElementById("container"); div.appendChild(doc.getElementById("the-entity")); } } xhr.send(null); }</script></head><body> inject the following entity: ’ <div id="container"> </div></body></html>
And here is the php file that is used to retrieve the entity:
<?phpheader('Content-type: application/xml; charset=UTF-8');$xml = new DOMDocument('1.0', 'utf-8');$tag = $xml->createElement('b','’');$tag->setAttribute("id","the-entity");$xml->appendChild($tag);echo $xml->saveXML();?>
You want ’, not ’ (which is an unprintable control character)

Insert external page html into a page html

I'd like to load/insert an external html page into my web page. Example :
<b>Hello this is my webpage</b>
You can see here an interresting information :
XXXX
Hope you enjoyed
the XXXX should be replaced by a small script (the smaller as possible) that load a page like http://www.mySite.com/myPageToInsert.html
I found the following code with jquery :
<script>$("#testLoad").load("http://www.mySite.com/myPageToInsert.html");</script>
<div id="testLoad"></div>
I would like the same without using an external javascript library as jquery...
There are 2 solutions for this (2 that I know at least):
Iframe -> this one is not so recommended
Send an ajax request to the desired page.
Here is a small script:
<script type="text/javascript">
function createRequestObject() {
var obj;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
obj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
obj = new XMLHttpRequest();
}
return obj;
}
function sendReq(req) {
var http = createRequestObject();
http.open('get', req);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if (http.readyState == 4) {
var response = http.responseText;
document.getElementById('setADivWithAnIDWhereYouWantIt').innerHTML=response;
}
}
sendReq('yourpage');
//previously </script> was not visible
</script>
Would an iframe fit the bill?
<b>Hello this is my webpage</b>
You can see here an interresting information :
<iframe id="extFrame" src="http://www.mySite.com/myPageToInsert.html"></iframe>
Hope you enjoyed
You can set the src attribute of your iframe element using plain old javascript to switch out the page for another
I think what you are looking for are in the Jquery source code.
you can see more details here $(document).ready equivalent without jQuery

Categories