PHP在Javascript中通过AJAX &异步


PHP In Javascript via AJAX & Async

根据我的理解,AJAX使javascript异步。我是AJAX新手,但注意到在为html文档创建脚本时,脚本有一个async属性。这些和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脚本永远不会到服务器,因为这个原因永远不会执行(只有服务器理解php脚本)如果你想调用url testfile.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将帮助你很多