?
Solved

How do I read an HTML page into a javascript string variable?

Posted on 2007-08-03
7
Medium Priority
?
1,964 Views
Last Modified: 2013-11-05
I have a dynamically created page with a very small amount of html on it. I can read it into a javascript through php to initialize it, but while the user is viewing the page, the dynamic link may need to change. Basically, I need a way to read the new page into a javascript string, and then from there I can use it for what I need it to do.

Is there a class or function that's supported by most browsers that will allow me to do this?

As an alternate solution, I could read in all the potential page iterations at the time the page is pulled from the server and save them to javascript array variables. But I'm hoping someone at ee knows a better way.
0
Comment
Question by:MasonWolf
  • 3
  • 2
  • 2
7 Comments
 
LVL 4

Accepted Solution

by:
DigitalTyrant earned 1000 total points
ID: 19628021
You can use an AJAX call to do this.
In a javscript file:

function GetXmlHttpObject()
{
  var objXMLHttp=null;
  if (window.XMLHttpRequest)
  {
    objXMLHttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return objXMLHttp;
}
function getHTML(querystring)
{
  var xmlHttp;
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }
  var url="http://www.domain.com/file.php";
  xmlHttp.onreadystatechange=function()
  {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
      document.getElementById('htmlElement').innerHTML=xmlHttp.responseText; //sends HTML to an element
      //or javascriptVar = xmlHttp.responseText;
    }
  };
  xmlHttp.open("POST",url,true);
  xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xmlHttp.send(vars);
}

0
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 1000 total points
ID: 19628193
The xmlhttp object is the way to do it and there is a good example above.  Unless I misread something you don't need one of the lines and should change another.  I will comment out the line to delete.

  xmlHttp.open("GET",url,true);
  //xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xmlHttp.send(null);

The change to GET isn't really important but unless you want to send info to the PHP page you should delete the second line and change the third like I have it.  If you do need to submit info then you need to make the variable for it.  Let me know if you have a question about it.

bol
0
 
LVL 13

Author Comment

by:MasonWolf
ID: 19628551
I tried to modify it and place it into a test script, but I don't know AJAX at all, so I think I'm doing something wrong.

Here's the test script.

<script type="text/javascript">
function GetXmlHttpObject()
{
  var objXMLHttp=null;
  if (window.XMLHttpRequest)
  {
    objXMLHttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return objXMLHttp;
}
function getHTML(querystring)
{
  var xmlHttp;
  var returnString;
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }
  var url="http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22740977.html";
  xmlHttp.onreadystatechange=function()
  {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
      //document.getElementById('htmlElement').innerHTML=xmlHttp.responseText; //sends HTML to an element
      returnString = xmlHttp.responseText;
    }
  };
  xmlHttp.open("GET",url+querystring,true);
  xmlHttp.send(null);
  return returnString;
}
document.write(getHTML('?cid=239'));
</script>

The error I received back was: "uncaught exception: Permission denied to call method XMLHttpRequest.open"
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 1000 total points
ID: 19628645
That error is because you are running the script from a different domain.  The object (xmlhttp) won't work cross domain.  Browser security prevents it.

If you can use server script then there are options with server code to do this.  Let me know which language you can use (e.g. ASP, PHP, etc).  If it is ASP then your code will be like the part making the ActiveX object.  PHP can use CURL to do it.

If you want to still test this and see how it works give it a URL on your server.  Let me know if you have a question or need more info.

bol
0
 
LVL 13

Author Comment

by:MasonWolf
ID: 19628700
Ah! Ok, I gotcha. The script in question is on the same domain as the one I'm calling in the functional page, but I was using a different server to test. Thanks guys.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19628779
Your welcome!  So the EE URL was just for posting here.  And here I thought you had some script to get EE question info.  :)

I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
 
LVL 4

Expert Comment

by:DigitalTyrant
ID: 19628996
The line:
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
is required if you want to use
xmlHttp.send(querystring);
Sorry, there was a typo in the original.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question