简体   繁体   中英

Alternatively load page via php if ajax fails

I am trying to replace the contents of a div with an external file via ajax. the code I am using to do so is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
window.onload = function(){

    document.getElementById("aside").innerHTML="<img src='loadingImage.gif'>";

    var x = null;

    if (window.XMLHttpRequest) {
        var x = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        var x = new ActiveXObject('MSXML2.XMLHTTP.3.0');
    } else {
        // fallback
    }

    x.open("GET", "other_content_1.php", true);
    x.send("");
    x.onreadystatechange = function() {

        if(x.readyState == 4) {
            if(x.status==200) 
                document.getElementById("aside").innerHTML = x.responseText;
            else 
                document.getElementById("aside").innerHTML = "Error loading document";
        }
    }
} 
</script>
</head>

<body>
<div id="aside">This is other content</div>
</body>
</html>

My Questions:

If JavaScript is enabled, then the above code works fine but if JavaScript is disabled, then php should load that file. How d I do this?

If you are going to make your code backward compatible without JavaScript then you really have no reason to use AJAX at all. If you just want the string into your aside Element then do something like:

//first the PHP page 'other_content_1.php'
<?php
  $resp = 'Whatever String Response You Want';
?>
//now your other page
<?php
  include 'other_content_1.php';
?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title>Test</title>
  </head>
<body>
  <div id='aside'><?php echo $resp; ?></div>
  <script type='text/javascript' src='should_be_external.js'></script>
<body>
</html>

Note, that if you want this to happen besides onload then you would submit a form using $_POST or $_GET to handle the PHP response.

Have you considered trying the noscript option? See: What do I do if Javascript is disabled by a client?

However, if you have a lot of pages this might be a lot of work if you use jquery/ajax throughout your pages - which I am guessing you do or loading them in with jquery/ajax would be slightly pointless.

By the time the web page is displayed in the browser and found that JS is not supported, PHP/server already served the page. You can try this.

  • #aside element can have text & link informing user about not having JS support and take another page
  • PHP can load the file and serve the content in the new page.

If JS is supported, your above code will be anyway replacing the above link.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM