繁体   English   中英

通过AJAX和Async在Javascript中使用PHP

[英]PHP In Javascript via AJAX & Async

据我了解,AJAX使javascript异步。 我是AJAX的新手,但在为html文档创建脚本时注意到,该脚本具有异步属性。 这些功能与AJAX的功能相同吗? 我会发现在DOM生成中已经存在的JavaScript文件中使用php非常有用。 为什么? 为了使生活更轻松和尽可能地面向对象。 我唯一想要的是使用php输出从javascript生成的php文件,但是以后我想直接使用javascript方法生成php。

index.php

 <!DOCTYPE html>

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

<script>

     var div = new Div();
     div.setPosition(Div.FIXED);
     div.setBounds(100,0,100,100);
     div.horizontalAlign(Div.LEFT);
     div.setPosition(Div.RELATIVE);

 </script>

jWebKit.js

    var head;
var body;
var jScript;
var devScript;
var phpScript;

(function(){

    document.open();

    jScript = document.createElement("script");
    jScript.src = "jWebKit.js";
    jScript.type = "text/javascript";


    devScript = document.createElement("script");

    phpScript = document.createElement("script");
    php.type = "text/javascript";
    php.text = 'document.write("<?php fopen("testfile.php", "w") ;?>");'; // This is the target script needed for file output below...
    phpScript.async = 'true';


}());

window.onload = function(){

    var cutScript;

    head = document.head;
    body = document.body;

    cutScript = head.innerHTML.toString().replace(jScript.outerHTML.toString(),'');



    devScript.text = phpScript.innerHTML.toString() + cutScript.replace('<script>', '').replace('</script>','');//Does not work!

    body.appendChild(devScript);
    head.innerHTML = head.innerHTML.toString().replace(cutScript,'');



    alert(document.documentElement.outerHTML);

    document.close();


};

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';

        }

    }

}

我不知道您到底想做什么,但是您要创建一个永远不会发送到服务器的php脚本,因此,如果您想调用url testfile.php ,它将永远不会执行(只有服务器才能理解php脚本)。你应该做这样的事情

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","testfile.php?q=something",true);
xmlhttp.send();

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
  //the responseText have the server response
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}

看到这个网站了解更多信息

http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

链接也请参见下一章

顺便说一句,jquery将为您提供很多帮助

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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