为什么javascript无法使用我在php文件中声明的javascript变量？

Question

Hey everybody, this issue has had me stumped for the last week or so, here's the situation:

I've got a site hosted using GoDaddy hosting. The three files used in this issue are index.html , milktruck.js , and xml_http_request.php all hosted in the same directory.

The index.html file makes reference to the milktruck.js file with the following code:

 <script type="text/javascript" src="milktruck.js"></script> 

The milktruck.js file automatically fires when the site is opened. The xml_http_request.php has not fired at this point.

On line 79 out of 2000 I'm passing the variable "simple" to a function within the milktruck.js file with:

 placem('p2','pp2', simple, window['lla0_2'],window['lla1_2'],window['lla2_2']);

"simple" was never initialized within the milktruck.js file. Instead I've included the following line of code in the xml_http_request.php file:

 echo "<script> var simple = 'string o text'; </script>";

At this point I have not made any reference whatsoever to the xml_http_request.php file within the milktruck.js file. I don't reference that file until line 661 of the milktruck.js file with the following line of code:

 xmlhttp.open('GET',"xml_http_request.php?pid="+pid+"&unLoader=true", false);

Everything compiles (I'm assuming because my game runs) , however the placem function doesn't run properly because the string 'string o text' never shows up.

If I was to comment out the line of code within the php file initializing "simple" and include the following line of code just before I call the function placem, everything works fine and the text shows up:

 var simple = 'string o text';

Where do you think the problem is here? Do I need to call the php file before I try using the "simple" variable in the javascript file? How would I do that? Or is there something wrong with my code?

Answer 1

So, we meet again!

Buried in the question comments is the link to the actual Javascript file. It's 2,200 lines, 73kb, and poorly formatted. It's also derived from a demo for the Google Earth API.

As noted in both the comments here and in previous questions, you may be suffering from a fundamental misunderstanding about how PHP works, and how PHP interacts with Javascript.

Let's take a look at lines 62-67 of milktruck.js:

//experiment with php and javascript interaction

//'<?php $simpleString = "i hope this works"; ?>'


//var simple = "<?php echo $simpleString; ?>";

The reason this never worked is because files with the .js extension are not processed by PHP without doing some bizarre configuration changes on your server. Being on shared hosting, you won't be able to do that. Instead, you can rename the file with the .php extension. This will allow PHP to process the file, and allow the commands you entered to actually work.

You will need to make one more change to the file. At the very top, the very very top, before anything else, you will need the following line:

<?php header('Content-Type: text/javascript'); ?>

This command will tell the browser that the file being returned is Javascript. This is needed because PHP normally outputs HTML, not Javascript. Some browsers will not recognize the script if it isn't identified as Javascript.

Now that we've got that out of the way...

Instead I've included the following line of code in the xml_http_request.php file: <a script tag>

This is very unlikely to work. If it does work, it's probably by accident. We're not dealing with a normal ajax library here. We're dealing with some wacky thing created by the Google Earth folks a very, very long time ago.

Except for one or two in that entire monolithic chunk of code, there are no ajax requests that actually process the result. This means that it's unlikely that the script tag could be processed. Further, the one or two that do process the result actually treat it as XML and return a document. It's very unlikely that the script tag is processed there either.

This is going to explain why the variable never shows up reliably in Javascript.

If you need to return executable code from your ajax calls, and do so reliably, you'll want to adopt a mature, well-tested Javascript library like jQuery. Don't worry, you can mix and match the existing code and jQuery if you really wanted to. There's an API call just to load additional scripts. If you just wanted to return data, that's what JSON is for. You can have PHP code emit JSON and have jQuery fetch it. That's a heck of a lot faster, easier, and more convenient than your current unfortunate mess.

Oh, and get Firebug or use Chrome / Safari's dev tools, they will save you a great deal of Javascript pain.

However...

I'm going to be very frank here. This is bad code. This is horrible code. It's poorly formatted, the commenting is a joke, and there are roughly one point seven billion global variables. The code scares me. It scares me deeply. I would be hesitant to touch it with a ten foot pole.

I would not wish maintenance of this code on my worst enemy, and here you are, trying to do something odd with it.

I heartily encourage you to hone your skills on a codebase that is less archaic and obtuse than this one before returning to this project. Save your sanity, get out while you still can!