Question

我是Ajax的新手，这让我很难过。它相对简单，但在第一个xhr.open（）上使用onclick处理程序。 Firebug说它不是一个函数，我的猜测是XMLHttpRequest对象没有被创建，但我不确定。有人有主意吗？

提前致谢。

function init(){

function getXMLHTTP(){
    var xhr = false;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

function updatePage(theData){
    $('results').innerHTML = theData;  //TODO: pretty this up with mootools
}

var xhr = getXMLHTTP();

if (xhr) {
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var theData = xhr.responseText;
                updatePage(theData);            
            }
            else{
                alert("Error communicating to web service!");
            }
        }
    }

    $('submit_btn').onclick = function(xhr){
        if ($('state').value != "") {
            var theValue = $('state').value;
            xhr.open("GET", "/inc/calc.php?state="+theValue, true); //Ajax 101: 3rd argument marks object as asynchronous
            xhr.send(NULL);
        }
        else if ($('city').value != "") {
            xhr.open("GET", "/inc/calc.php?city="+$('city').value, true);
            xhr.send(NULL);         
        }
        else if ($('county').value != "") {
            xhr.open("GET", "/inc/calc.php?county="+$('county').value, true);
            xhr.send(NULL);         
        }
        else {
            //the form is empty, or just down payment is filled. returns whole freakin' table.
            xhr.open("GET", "/inc/calc.php", true);
            xhr.send(NULL);             
        }
    }   
}

}

Answer 1

代码的问题是onclick功能。您已将参数列表中的xhr放入函数中。请记住，调用函数时，调用者会设置此变量的值。在这种情况下，它将是事件调度程序，它可能会将xhr变量设置为一个事件对象，该事件对象没有打开的函数。

如果从onclick函数的参数列表中删除xhr变量，那么它将在父作用域中查找xhr变量，即全局作用域，它将在那里找到它，它应该可以工作。我没有测试过它。

我假设您正在使用某种框架（通过频繁使用$以及对mootools的引用来判断）。该框架可能内置了ajax函数，以及跨浏览器事件模型。尝试使用它，你会遇到很多问题。

Answer 2

分配onclick处理程序时，您创建一个新函数，该函数采用名为xhr的参数：

$('submit_btn').onclick = function(xhr){
   ...
   xhr.open("GET", "/inc/calc.php?state="+theValue, true);
   ...
}

单击该按钮不会将XMLHttpRequest对象传递给处理程序，因此xhr将不会有open()方法。 xhr的全局定义无关紧要，因为它被本地参数定义所遮蔽。

通常，您应该在需要时生成新的本地XMLHttpRequest对象，而不是尝试使用全局对象。例如，使用创建新的本地XMLHttpRequest的onclick函数：

$('submit_btn').onclick = function(){
   var xhr = getXMLHTTP();
   xhr.open("GET", "/inc/calc.php?state="+theValue, true);
   ...
}

XMLHttpRequest对象没有被实例化？

2 个答案: