Ajax请求在调用后不设置全局变量

时间:2013-03-23 00:14:17

标签: javascript ajax variables global-variables

我正在尝试在Javascript中进行AJAX调用以获得两个值。然后我想全局使用这些值进行一些计算,然后打印出结果。以下是我的代码。

   // my calculation functions will go here

   var value1 = 0;
   var value2 = 0;
   MakeRequest(); //after makeRequest() value1 and value2 should be 10 and 20 respectively.
   var total = value1 + value2;
   console.log(total); // this is still zero. because value1 and value2 are still 0.


//request AJAX
    function createXMLHTTPObject(){
        var ajaxRequest;  // The variable that makes Ajax possible!

        try{
            // IE 7+, Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
            return ajaxRequest;
        } catch (e){
            // Internet Explorer
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                return ajaxRequest;
            } catch (e) {
                try{
                    // Internet Explorer 5, 6
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    return ajaxRequest;
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
    }

    // Create a function that will receive data sent from the server
    function AjaxRequest(url,callback,method){
        var req = createXMLHTTPObject();
        req.onreadystatechange= function(){
                if(req.readyState != 4) return;
                if(req.status != 200) return;
                callback(req);
        }
        req.open(method,url,true);
        req.send(null);
    }

    function AjaxResponse(req){
        var respXML=req.responseXML;
        if(!respXML) return;
        value1=respXML.getElementsByTagName("value1")[0].childNodes[0].nodeValue;
        value2= respXML.getElementsByTagName("value2")[0].childNodes[0].nodeValue;
        console.log("the value1 is "+ value1);  //successfully print the values
        console.log("the value2 is "+ value2);
    } 

    function MakeRequest(){
         AjaxRequest("values.xml",AjaxResponse,"get");
    }
  1. 所以我的第一个问题是为什么total = value 1 + value2仍为0.我已经将它们作为全局变量,然后更新了makeRequest()中的value1和value2,但它似乎不会影响该值。我可以做什么,以便我可以更新value1和value2,以便在这些函数之外使用它们。

  2. 基本上我从在线教程中复制ajax请求代码。这里有一点我不明白。当我调用MakeRequest()函数时,它调用AjaxRequest(“values.xml”,AjaxResponse,“get”);但是,AjaxReponse(req)需要一个参数“req”。但AjaxRequest内的AjaxResponse(“values.xml”,AjaxResponse,“get”)没有放置参数。它仍然有效。这是为什么?我真的明白这一部分。

1 个答案:

答案 0 :(得分:4)

因为AJAX调用是异步,这意味着您的代码实时运行:

var value1 = 0;
var value2 = 0;
MakeRequest();           // AJAX REQUEST is made, that will happen on its on timeline
var total = value1 + value2;
console.log(total);     // still will be 0 at this point, since AJAX response has not returned


// MakeRequest will fire AJAX request and WHEN THE REQUEST IS SUCCESSFUL, it can modify value1 and value2, then calculate total  

如果您希望total = value1 + value2value1依赖于AJAX请求的结果,那么在您的AJAX请求成功返回后,应计算 {em>。< / p>