Why a Javascript code returned with AJAX doesn't write in a specified <div>, but it replaces the whole page?_问答_开发者

Why a Javascript code returned with AJAX doesn't write in a specified <div>, but it replaces the whole page?

开发者 https://www.devze.com 2023-03-20 07:39 出处：网络

I am requesting with AJAX (using jQuery) atag which contains a Javascript function call to an Apache+PHP server. Here is the HTML and AJAX code:

I am requesting with AJAX (using jQuery) a tag which contains a Javascript function call to an Apache+PHP server. Here is the HTML and AJAX code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://localhost/LivingLab/javascript/jquery.min.js"></script>
</head>

<body>
<a href="javascript: void(0)" onclick="
    $.post(
        'http://localhost/test.php',    // server target page
        {some_var: 'abc'},              // data to be sent via POST method
        function(data) {                // JS callback function
            $('#container').html(data); // innerHTML of <div id="container"> will be replaced
        }
    )
">Click me!</a>
<div id="container"></div>
</body>
</html>

AJAX requests the page 'http://localhost/test.php' which has the following PHP code:

<?php
    echo '<script type="text/javascript"> document.write("Javascript output"); </script>';
?>

When I click on the link, after the AJAX request, the whole page is replaced by "Javascript output", instead of writing this only inside the div tag with id "container".

If the PHP server script writes something else, instead of a script tag like this:

<?php echo 'text' ?>

the AJAX call behaves normal, by replacing div with id "container" and not the whole page.

I tried to investigate HTTP data transfered by this pages with Wireshark and it doesn't seem to be an HTTP problem because server response开发者_StackOverflow中文版 is exactly how it should be:

<script type="text/javascript"> document.write("Javascript output"); </script>

Running the Javascript code without AJAX does not replace the whole page, this happens only when the script tag is returned using AJAX. A noticed the same behavior in Firefox 3 and 5 and also in Google Chrome.

Why does this happen?

document.write is normally used during the main load of the page, during which it outputs to the parsing stream that the browser reads to render the main page. If you use it after the initial load of the page is complete, it implicitly does an open on the document, which completely tears down the document and starts fresh with the newly-written content.

The short version is: Only use document.write during main page load (if then). After the page has loaded, use DOM manipulation instead.

Example (live copy):

<body>
  <input type='button' id='theButton' value='Click Me'>
  <script>
    document.write(
      "<p><code>document.write</code> is fine here, during " +
      "the main load of the page.</p>");
    document.getElementById("theButton").onclick = function() {
      document.write(
        "<p>But not here, because the initial " +
         "page load is complete and using " +
         "<code>document.write</code> at this point tears " +
         "down the document and starts  new one.</p>");
    };
  </script>
</body>

More about from the DOM2 HTML spec, the HTML5 spec, and MDC:

document.write: DOM2 | HTML5 | MDC
document.open: DOM2 | HTML5 | MDC
(called implicitly by document.write if you call it once the page is loaded)

Because jQuery will recognise the javascript block and run it against the page, not the target container.

https://groups.google.com/forum/#!topic/jquery-en/tzu5n5k8Jp4

<script type="text/javascript"> document.write("Javascript output"); </script>

Why not just return "JavaScript Output" since you're altering the value of $('#container') anyway, there's no need to try to use an inline JavaScript document.write to write it out.