简体   繁体   中英

PHP to Javascript Variable via AJAX/XML

First to make it clear. I want to do this without using jQuery, in other words, yes I want to re-invent the wheel to understand how the wheel works. To my understanding this is possible via AJAX, but the net seems to only provide jQuery solutions to the problem. My goal is to generate an html document using javascript, but in turn after the page has loaded output only the non-script stub of the documents outerHTML via javascript to a new .php file which contains only the specified text.

index.php

    <!DOCTYPE html>

<?php
    include 'devScript.php';

    $div = new Div();
    $div->setBounds(0, 0, 100, 100);
?>

devScript.php

    <script type="text/javascript">

    var srcScript;
    var devScript;
    var stubScript;

    (function() {

        document.documentElement.appendChild(document.createElement('body'));

        srcScript = document.head.innerHTML;



    }());


    window.onload = function() {



        devScript = document.head.innerHTML.toString().replace(srcScript, '');
        document.documentElement.removeChild(document.documentElement.lastChild);

        stubScript = document.documentElement.outerHTML.toString().replace(srcScript, '').replace(devScript, '');

        alert("Full Script!");
        alert(document.documentElement.outerHTML);
        alert('Stub Script');
        alert(stubScript);

<?php
/*
  $file = fopen("iHateWritingHtmlTags.php", 'w');
  fwrite($file, stubScript);

  This DOES NOT WORK!!!!
 */
?>


    }

    function Div() {

        Div.STATIC = 'static';
        Div.ABSOLUTE = 'absolute';
        Div.RELATIVE = 'relative';
        Div.FIXED = 'fixed';
        Div.SOLID = 'solid';
        Div.DOTTED = 'dotted';
        Div.LEFT = 0;
        Div.CENTER = 1;
        Div.RIGHT = 2;
        Div.TOP = 0;
        Div.MIDDLE = 1;
        Div.BOTTOM = 2;

        var ELEMENT;
        var CSS;

        var horizontalAlign;
        var verticalAlign;

        var colorQueue;



        (function() {

            this.div = document.createElement('div');

            ELEMENT = this.div;
            CSS = this.div.style;

            CSS.border = '1px solid black';



            document.body.appendChild(this.div);



        }());

        this.setPosition = function(postype) {

            if (!horizontalAlign && !verticalAlign) {

                CSS.position = postype;

            }


        }

        this.setBounds = function(x, y, width, height) {

            CSS.left = x + 'px';
            CSS.top = y + 'px';
            CSS.width = width + 'px';
            CSS.height = height + 'px';

        }

        this.setColorQueue = function(r, g, b) {

            colorQueue = 'rgb(' + new Array(r, g, b) + ')';
            alert(colorQueue);

        }

        this.horizontalAlign = function(horiz) {

            var freeSpaceX = ((window.innerWidth - ELEMENT.offsetWidth) / 2);
            var defPadding = '8px';
            var defPaddingCenter;
            var defPaddingRight;
            var defPaddingLeft;

            horizontalAlign = true;

            this.setBounds(0, 0, 100, 100);

            if (CSS.position == 'relative' || CSS.position == 'absolute') {

                CSS.position = 'absolute';
                defPaddingCenter = 12;
                defPaddingRight = 4;
                defPaddingLeft = 8;



            } else if (CSS.position == 'fixed') {

                defPaddingCenter = 4;
                defPaddingRight = 4;
                defPaddingLeft = 8;

            }

            if (horiz == 0) {

                if (!verticalAlign) {
                    CSS.marginTop = defPadding;
                }
                CSS.marginLeft = defPaddingLeft + 'px';

            } else if (horiz == 1) {

                if (!verticalAlign) {
                    CSS.marginTop = defPadding;
                }
                CSS.marginLeft = freeSpaceX - defPaddingCenter + 'px';

            } else if (horiz == 2) {

                if (!verticalAlign) {
                    CSS.marginTop = defPadding;
                }
                CSS.marginLeft = (freeSpaceX - defPaddingRight) * 2 + 'px';

            }

        }

    }


</script>
<?php

class Div {

    public $obj_id;

    function __construct() {

        $this->obj_id = "_" . uniqid(rand());

        echo '<script>',
        'var ' . $this->obj_id . ' = new Div();',
        '</script>';
    }

    function setPosition() {

        echo '<script>',
        $this->obj_id . '.setPosition();',
        '</script>';
    }

    function setBounds($x, $y, $width, $height) {


        $parse_string = $x . ',' . $y . ',' . $width . ',' . $height;


        echo '<script>',
        $this->obj_id . '.setBounds(' . $parse_string . ');',
        '</script>';
    }

    function setColorQueue() {

        echo '<script>',
        $this->obj_id . '.setColorQueue();',
        '</script>';
    }

    function horizontalAlign() {

        echo '<script>',
        $this->obj_id . '.horizontalAlign();',
        '</script>';
    }

}
?>

NOTE: The Root of the problem is in index.php. Feel free to test these two out on firefox because the alert box has a scroll bar. :)

OUTPUT: iHateWritingHtmlTags.php only contains "stubScript" as its text not the actual javascript variable stubScript?!?!

Let "variable" be the name of the Javascript variable

<form action="." method="get">

<input type='hidden' name='Javascript_Variable' value='<script>document.write(variable);</script>'>

</form>

Now, in PHP:

<?php

 $phpVariable = $_GET['Javascript_Variable'];

?>

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