AJAX-Get data from php_问答_开发者_运维开发者技术经验分享

I am a newbie to AJAX.The task is I have to get the data from a php file and store it in a javascript variable. I have gone through many examples but didn't find helpful. I am giving a pseudo html code here:

<html>
<head>
<script>
function ajaxfunction()
{
   //code for httprequest
   **call the php file declare a variable and store the response of php**
   //return the variable
}
</script>
</head>
<body>
   //my code for displaying a map
    **mainvariable=ajaxfunction();//storing the value of subvariable(data from php) in mainvariable**
   //use the mainvariable and do the remaining task
<body>

My php code:

<?php 
  $fil开发者_高级运维e=fopen("datapoints.txt","r");
  $read=fread($file,filesize("datapoints.txt"));
  fclose($file); 
  echo $read;
?>

the problem here is I dont have any form variables in my html file to use while calling php file. simply when the page loads, "ajaxfunction()" should be called and get data from php and store in a variable................

I guess you can understand my problem

Any help is greatly appreciated

You can put jQuery to good use here. The docs are here http://api.jquery.com/jQuery.ajax/.

An example is below:

<html>
<head>
<!-- Include jquery from Google here -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script  type="text/javascript">
// Wait till dom is loaded
$(document).ready(function() {
  // When id with Action is clicked
  $("#Action").click(function()
  {
     // Load ajax.php as JSON and assign to the data variable
     $.getJSON('ajax.php', function(data) {
        // set the html content of the id myThing to the value contained in data
        $("#myThing").html(data.value);
     });   
  });
});
</script>
</head>
<body>
  <a id="Action">Click Me</a>
  <p id="myThing"></p>
</body>
</html>

Your ajax.php file can just contain:

<?php
    echo json_encode(array("value" => "Hello World"));
?>

If you would like to would like to send data from php to javascript down, you can use json_encode. To recieve data with php you can use $_GET and $_POST (as long as you are writing an application in which all that is simple) :)

For your Ajax Requst you (I allow this just for the author of this question) can use my javascript code:

function getRequestObject(){
    var o = null;
    if(window.XMLHttpRequest){
        o = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try{
            o = new ActiveXObject('Msxml2.XMLHTTP');
        }catch(e1){
            try{
                o = new ActiveXObject('Microsoft.XMLHTTP');
            }catch(e2){

            }
        }
    }
    return o;
}
function request(method, adress,sendData,callback){
    var o = getRequestObject();
    var async = (callback!==null);
    if(method === 'GET'){
        if(sendData!=null){adress+="?"+sendData;}
        o.open(method, adress, async);
        o.send(null);
    }else if(method === 'POST'){
        o.open(method, adress, async);
        o.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
        o.send(sendData);
    }
    if(async){
        o.onreadystatechange = function (){
            if(o.readyState==4&&o.status==200){
                callback(o.responseText);
            }else if(o.readyState==4&&o.status!=200){
                //Error
            }
        };
    }
    if(async){return ;}
    else{return o.responseText;}
}

The RequestCache is implemented as Object (look how this is done in Javascript) But maybe JQuery or so can solve your tasks too.

function RequestCache (){}
RequestCache.cache = Array();
RequestCache.getRequest=function (method, adress,sendData,callback,enforceReload){
    if(enforceReload===null){enforceReload=false;}
    var url = method+adress+sendData;
    var newUrl = true;
    if(typeof(enforceReload)==="undefined"||enforceReload===false){
        for(var key in RequestCache.cache){
            if(key===url){
                newUrl=false;
                break;
            }
        }
    }
    if(newUrl){
        if(callback){
            request(method, adress,sendData,
                function(res){
                    RequestCache.cache[url]=res;
                    callback(res);
                }
            );
        }else{
            RequestCache.cache[url]=request(method, adress,sendData,null);
            return RequestCache.cache[url];
        }
    }else{
        if(callback){
            callback(RequestCache.cache[url]);
        }else{
            return RequestCache.cache[url];
        }
    }
};
RequestCache.setRequest = function (method, adress,sendData,result){
    var url = method+adress+sendData;
    RequestCache.cache[url] = result;
};

The easiest way to do what you want that I know, would be the jQuery .load() function or perhaps the .get() function to store it in a variable.