1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:16 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

A page to display nothing in browser window

         

dbarasuk

2:12 pm on Nov 23, 2011 (gmt 0)

10+ Year Member



Hi all,
first i am apologizing beforehand for the question i am going to ask. I am completely new to Ajax. I have heard about the power of Ajax technology a couple of years before and now i have decided to learn it.


So, i have a small html program containing an ajax call. Apart from the fact that the program may contain some errors, i expected at least to see the static html content in the browser window but to my surprise, nothing shows up.

Can someone tell me where the error could reside?

Here you have the code for the html file:

<html>
<head>
<title>Ajax XML Example<title>
</head>
<body>
<h2>Loading a XML content into a DIV</h2>
<div id='info'>This sentence will be replaced</div>
<script>

nocache = '&nocache='+math.randon()*1000000
url = 'rss.news.yahoo.com/rss/topstories'
request = new ajaxRequest();

request.open('GET','xmlget.php?url=' + url + nocache,true)
out='';


request.onreadystatechange = function()
{
if(this.readyState == 4){
if(this.status == 200){
if(this.responseXML != null){
titles = this.responseXML.getElementsByTagName('title')
for(j = 0; j < titles.length; ++j){
out+=titles[j].childNodes[0].nodeValue + '<br />'
}
document.getElementById('info').innerHTML = out
}
else{
alert('Ajax error: No data received');
}
}
else{
alert('Ajax error :'+ this.statusText);
}
}
}
request.send(null)
function ajaxRequest(){
try
{
var request = new XMLHttpRequest()
}
catch(e1)
{
try
{
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e2)
{
try
{
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e3)
{
request = false;
}
}
}
return request
}
</script>
</body>
</html>


And here is the code for the PHP program that is used in the html program:

<?php
if(isset($_GET['url'])){
echo header('Content-Type: text/xml');
file_get_contents('http://'.sanitizeString($_GET['url']));
}

function sanitizeString($var){
$var = strip_tags($var);
$var = htmlentities($var);
return stripslashes($var);
}

NOTE: the two files are saved in a subfolder of the apache document root.

Any suggestion will be welcome!

Thanks in advance

Fotiman

3:26 pm on Nov 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



nocache = '&nocache='+math.randon()*1000000
math should be Math (case matters)
random is spelled wrong.
It's good form to use 'var' to declare the variable, and also good to end with a semi-colon.

You're creating a lot of global variables (as a result of not using var). In general that should be avoided. In this particular case, your entire script is running in a global context, so you might consider cleaning it up some to reduce the number of globals you have.

The main problem I notice is that you're doing this:

request = new ajaxRequest();

But ajaxRequest is not a constructor method. It's just a regular old function that returns an object. So remove the "new" from that line.

In addition, the method you're using for getting the XMLHttpRequest object is a bit outdated. Here's an alternative: 


/** 
 * Gets an XMLHttpRequest. For Internet Explorer 6, attempts to use MXSML 3.0.
 * @return {XMLHttpRequest or equivalent ActiveXObject} 
 */ 
function getXHR() { 
 return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MSXML2.XMLHTTP.3.0'); 
}


Then your code could be modified as follows: 


var nocache = '&nocache=' + Math.random() * 1000000,
  url = 'rss.news.yahoo.com/rss/topstories',
  request = getXHR();
  
/** 
 * Gets an XMLHttpRequest. For Internet Explorer 6, attempts to use MXSML 3.0.
 * @return {XMLHttpRequest or equivalent ActiveXObject} 
 */ 
function getXHR() { 
 return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MSXML2.XMLHTTP.3.0'); 
} 

request.open('GET', 'xmlget.php?url=' + url + nocache, true);
request.onreadystatechange = function () { 
  var j,
    out = '',
    titles;
  if (this.readyState == 4) { 
    if (this.status == 200) { 
      if (this.responseXML != null) { 
        titles = this.responseXML.getElementsByTagName('title'); 
        for(j = 0; j < titles.length; ++j) { 
          out += titles[j].childNodes[0].nodeValue + '<br />';
        } 
        document.getElementById('info').innerHTML = out;
      } 
      else { 
        alert('Ajax error: No data received'); 
      } 
    } 
    else { 
      alert('Ajax error :'+ this.statusText); 
    } 
  } 
} 
request.send(null)


Note, I also moved your 'out' variable to have function scope instead of global scope (so that any additional requests don't append to a global variable which may contain previous request data).

Lastly, you may need to encodeURIComponent your url and nocache variables (or some of the contents within).

dbarasuk

2:01 pm on Nov 24, 2011 (gmt 0)

10+ Year Member



Hi,
I made the changes suggested by Fotiman but still the page displays nothing, not even the static html content. What could be wrong?

thanks

dbarasuk

2:22 pm on Nov 24, 2011 (gmt 0)

10+ Year Member



Hi,
After corrections suggested, this is code that still displays nothing, not even the static html content inside:

<html>
<head>
<title>Ajax XML Example<title>
</head>
<body>
<h2>Loading a XML content into a DIV</h2>
<div id='info'>This sentence will be replaced</div>
<script>

nocache = '&nocache='+Math.random()*1000000
url = 'rss.news.yahoo.com/rss/topstories'
//request = ajaxRequest();
request = getXHR();

function getXHR() {
return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MSXML2.XMLHTTP.3.0');
}

request.open('GET','xmlget.php?url=' + url + nocache,true)
//out='';


request.onreadystatechange = function()
{

var j, out = '', titles;
if(this.readyState == 4){
if(this.status == 200){
if(this.responseXML != null){
titles = this.responseXML.getElementsByTagName('title')
for(j = 0; j < titles.length; ++j){
out+=titles[j].childNodes[0].nodeValue + '<br />'
}
document.getElementById('info').innerHTML = out
}
else{
alert('Ajax error: No data received');
}
}
else{
alert('Ajax error :'+ this.statusText);
}
}
}
request.send(null);
/*function ajaxRequest(){
try
{
var request = new XMLHttpRequest()
}
catch(e1)
{
try
{
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e2)
{
try
{
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e3)
{
request = false;
}
}
}
return request
}*/
</script>
</body>
</html>

Any suggestion is more than welcome,
thanks

lucy24

6:39 am on Nov 27, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You are so going to kick yourself. Had to paste it in and do HTML Preview before I caught it myself:
<title>Ajax XML Example<title>

For some reason Camino ignores the issue and displays the title and static text as intended. But all my other browsers-- including Firefox-- choked.

This, however, only helps with the static text. There may or may not be additional problems. Various browsers tell me various stuff in Hungarian, but they agree that whatever-it-is happens in the line

request.send(null);

I suspect that they are lying in their teeth, because when I try it locally, it predictably fails at

request.open('GET','xmlget.php?url=' + url + nocache,true)


alert("OK so far");

Good for what ails you. Yes, there are more sophisticated means of debugging, but the humble alert can't be beat for pinning down where the problem starts. No alert = the script has already died. I also use it when the script is supposed to return a value and I suspect it isn't returning the right one.

astupidname

8:21 am on Nov 30, 2011 (gmt 0)

10+ Year Member



You are so going to kick yourself

Umm, yeah all of you will! :-)
After you correctly fix the second title tag to a closing </title>, then in your php file this:
file_get_contents('http://'.sanitizeString($_GET['url']));

should be:
echo file_get_contents('http://'.sanitizeString($_GET['url']));


(Actually, according to the title of this thread, I should have instead told you to remove this:
<h2>Loading a XML content into a DIV</h2>
:-)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:16 pm May 13, 2026