Question

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

有一次它会检查readyState == 4 AND status == 200，如果这是假的，那么它会显示警告信息＆＃34; nope＆＃34; - 它始终警告＆＃34; nope＆＃34;以及执行if语句的其他部分..为什么？（下面列出的是我到目前为止唯一的代码 - 没有其他文件可以调用该函数）如果我采用＆＃34; else＆＃34;声明它工作正常，但这对我来说可能是一个问题，我想知道它为什么这样做...非常感谢！

<!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>

Answer 1

要访问4，readyState必须经过0，1，2和3。每次它都会失败你的if声明 - 毕竟，这就是我们测试它的原因。

您应该执行以下操作：

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代码等 - 并非所有的浏览器都乐于为多个请求重用相同的对象。

Answer 2

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

首先，有一些优秀的JavaScript库，例如jQuery，它们将为您处理许多这些细节。使用jQuery，可以使用更简单的XMLHttpRequest调用替换复杂的$.ajax()代码，或者根据您正在执行的操作，更简单的$.get()，$.post()或{ {1}}致电。

此外，建议的现代做法是不在$.getJSON()属性中设置事件处理程序，而是使用JavaScript代码来执行此操作。

所以，你会改变这行HTML代码：

onclick

为：

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

并用以下内容替换整个JavaScript代码块：

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

或者，为了便于说明，使用$(document).ready( function() { $('#testButton').on( 'click', function() { $('#targetDiv').load( 'http://localhost/AV/data.txt' ); }); $.ajaxError( function( jqXHR, textStatus, errorThrown ) { alert( errorThrown ); }); });和$.ajax()功能对原始代码进行编码：

getData()

避免使用具有七年历史的Ajax书籍的另一个原因：如果我的猜测是正确的，当本书通过下载简单HTML（如本示例）并开始下载您将在JavaScript中操作的原始数据时，它可能会建议使用XML来获取此数据。（XML，当然是AJAX中的“X”。）

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

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

此外，无论您决定探索这些库还是代码“裸机”JavaScript，请务必熟悉大多数浏览器现在提供的开发人员工具。我最喜欢的是Chrome DevTools。

另一件事;你不再需要那些复杂的XHTML内容了：

$(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 );
        }
    });
}

您可以用以下内容替换所有内容：

<!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>

我不建议在JavaScript中这样做。相反，请使用以下样式：

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

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

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

由于JavaScript的自动分号插入，您需要将function foo() { // Return an object - or does it??? return { a: 'b', c: 'd' } }和后面的大括号放在同一行上才能正常工作。既然你必须在那里做，那么你也可以保持一致并以这种方式编写所有代码：

return

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

Answer 3

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

function getData（dataSource，divID）
{
如果（XMLHttpRequestObject）
{
var obj = document.getElementById（divID）;

XMLHttpRequestObject.open（“GET”，dataSource，true）;
XMLHttpRequestObject.send（NULL）;
XMLHttpRequestObject.onreadystatechange = function（）
{
alert（'就绪状态： - '+ XMLHttpRequestObject.readyState +'\ n'+'状态： - '+ XMLHttpRequestObject.status）;
if（XMLHttpRequestObject.readyState == 4＆amp;＆amp; XMLHttpRequestObject.status == 200）
{
obj.innerHTML = XMLHttpRequestObject.responseText;
}
否则
{
警报（ “不”）;
}
}

}
}

进一步参考访问此链接： - All About XMLHTTPRequest

使用Ajax和Javascript - 执行if / else语句

3 个答案: