homepage Welcome to WebmasterWorld Guest from 174.129.103.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
A page to display nothing in browser window
dbarasuk




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

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




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

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




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

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




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

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




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

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




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

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>
:-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved