0

嗨，我是新来的，所以我希望我做对了。我正在阅读 Ajax for Dummies 书（一年前阅读了 php，这很棒，所以试一试），我坚持使用第一个真正的 Ajax程序..我花了很长时间才真正找到文本文件，但是在试图找出问题在程序中的位置时，我注意到了一个我不明白的问题。

在某一时刻，它会检查是否 readyState == 4 AND status == 200，如果为假，那么它会显示“nope”的警报消息——它总是会发出“nope”警报并执行 if 语句的另一部分.. 为什么？（下面列出的是到目前为止我得到的唯一代码 - 没有其他文件可以调用该函数）如果我把“else”语句拿出来它工作正常，但这对我来说以后可能是个问题，我想知道它为什么这样做...非常感谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Ajax at work</title>
<script language = "JavaScript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) 
{
    XMLHttpRequestObject = new XMLHttpRequest();
} 
else if (window.ActiveXObject) 
{
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
    if(XMLHttpRequestObject) 
    {
        var obj = document.getElementById(divID);
        XMLHttpRequestObject.open("GET", dataSource, true);
        XMLHttpRequestObject.onreadystatechange = function()
        {
            if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
            {
                obj.innerHTML = XMLHttpRequestObject.responseText;
            } 
            else 
            {
                alert("nope");
            }
        }
        XMLHttpRequestObject.send(null);
    }
}
</script>
</head>
<body>
    <H1>Fetching data with Ajax</H1>
    <form>
        <input type="button" value="submit" onclick="getData('http://localhost/AV/data.txt', 'targetDiv')">
    </form>
    <div id="targetDiv">
        <p>The fetched data will go here.</p>
    </div>
</body>
</html>
4

3 回答 3

1

为了到达4，readyState必须经过0、1和。每次它都会使您的陈述失败-毕竟，这就是我们对其进行测试的原因。23if

您应该执行以下操作：

if( this.readyState != 4) return;
if( this.status == 200) { /* do something with this.responseText */ }
else { /* handle error condition with this.status and this.statusText */ }

注意使用this- 最好使用关键字，以防万一您以后将变量用于其他用途，您可以避免关闭问题。

编辑：另一件事，你应该new XMLHttpRequest在使用它的函数内移动你的代码等 - 并非所有浏览器都乐于为多个请求重用同一个对象。

于 2013-06-15T03:50:02.687 回答
1

您在评论中提到您正在使用一本已有七年历史的 Ajax 书籍。在过去的七年里，情况发生了很大变化。如果您刚刚开始使用这种客户端的东西，您可能会通过扔掉那本书并采取更现代的方法来帮自己一个忙。

一方面，有一些优秀的 JavaScript 库，比如jQuery，可以为你处理很多这些细节。使用 jQuery，XMLHttpRequest可以用更简单的$.ajax()调用替换复杂的代码，或者根据您的操作，使用更简单$.get()的$.post(), 或$.getJSON()调用。

此外，推荐的现代做法是不要在属性中设置事件处理程序onclick，而是使用 JavaScript 代码来完成。

因此，您将更改这行 HTML 代码：

<input type="button" value="submit"
    onclick="getData('http://localhost/AV/data.txt', 'targetDiv')">

至：

<input type="button" value="submit" id="testButton">

并将整个 JavaScript 代码块替换为：

$(document).ready( function() {

    $('#testButton').on( 'click', function() {
        $('#targetDiv').load( 'http://localhost/AV/data.txt' );
    });

    $.ajaxError( function( jqXHR, textStatus, errorThrown ) {
        alert( errorThrown );
    });
});

或者，为了说明起见，另一种编码方式，使用$.ajax()和getData()原始功能类似的功能：

$(document).ready( function() {
    $('#testButton').on( 'click', function() {
        getData( 'http://localhost/AV/data.txt', '#targetDiv' );
    });
});

function getData( url, target ) {
    $.ajax( url, {
        dataType: 'html',
        success: function( data ) {
            $(target).html( data );
        },
        error: function( jqXHR, textStatus, errorThrown ) {
            alert( errorThrown );
        }
    });
}

避免阅读七年历史的 Ajax 书籍的另一个原因：如果我的猜测是正确的，那么当这本书不再像本示例中那样下载简单的 HTML 并开始下载您将在 JavaScript 中操作的原始数据时，它可能建议使用 XML这个数据。（XML，当然是 AJAX 中的“X”。）

但是，如果您在服务器上生成数据，那么 XML 是一种糟糕的方法。在 PHP 中，生成 JSON 数据而不是 XML 一样容易，而在 JavaScript 中使用 JSON更容易和更快。

您应该检查 JavaScript 编码的其他库是Underscore.js或其较新的兄弟Lo-Dash。这些库具有多种实用功能，可以使各种编码任务变得更容易。

此外，无论您决定探索这些库中的任何一个还是编写“裸机”JavaScript，请务必熟悉现在大多数浏览器中可用的开发人员工具。我最喜欢的是Chrome DevTools。

另一件事；你不再需要那些复杂的 XHTML 东西了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

您可以将所有这些替换为：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

最好将您的服务器配置为在Content-Type标头中指定字符集；那么你就不需要这里的<meta>标签了。

而且您不需要脚本标签中的语言，只需使用<script>.

最后，如果我可以提供一个关于编码风格的建议……即使您更喜欢将左大括号放在自己的行上：

function foo()
{
    alert( 'bar' );
}

我不建议在 JavaScript 中这样做。相反，使用这种风格：

function foo() {
    alert( 'bar' );
}

原因是如果你使用前一种风格，你最终会这样做：

function foo()
{
    // Return an object - or does it???
    return
    {
        a: 'b',
        c: 'd'
    }
}

由于 JavaScript 的自动分号插入，您需要将return其后的大括号和大括号放在同一行上才能正常工作。既然你必须在那里做，你不妨保持一致并以这种方式编写所有代码：

function foo() {
    // Return an object - or does it???
    return {
        a: 'b',
        c: 'd'
    }
}

我知道编码风格是个人喜好，但你会发现大多数 JavaScript 开发人员出于这个原因遵循这个花括号约定，即使他们在其他语言中更喜欢不同的风格。

于 2013-06-15T07:00:30.803 回答
0

请尝试此代码，然后您将得到答案。

函数 getData(dataSource, divID)
{
     if(XMLHttpRequestObject)
     {
         var obj = document.getElementById(divID);

         XMLHttpRequestObject.open("GET", dataSource, true);
         XMLHttpRequestObject.send(null);
         XMLHttpRequestObject.onreadystatechange = function()
         {
             alert('Ready State:- ' +XMLHttpRequestObject.readyState + '\n' + 'Status:- ' + XMLHttpRequestObject.status);
             if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
             {
                 obj.innerHTML = XMLHttpRequestObject.responseText;
             }
             其他
             {
                 警报（“不”）；
             }
         }

     }
}

如需进一步参考，请访问此链接：-关于 XMLHTTPRequest

于 2013-06-15T04:20:39.483 回答