0

こんにちは、新しいので、これが正しくできたことを願っています.. Ajax for Dummies の本を読んでいます (1 年前に php を読んで、これは素晴らしかったので、これを試してみてください)。プログラム..実際にテキストファイルを見つけるのに永遠にかかりましたが、プログラムのどこに問題があるのか​​ を見つけようとしているときに、理解できない問題に気づきました。

ある時点で、readyState == 4 AND status == 200 かどうかを確認し、それが false の場合は、「いいえ」という警告メッセージを表示します。常に「いいえ」と警告し、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を通過する必要があります。それがあなたの声明に失敗するたびに-結局のところ、それが私たちがそれをテストする理由です.0123if

次のようにする必要があります。

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

あなたはコメントで、7 年前の Ajax の本を扱っているとおっしゃいました。過去7年間で状況は大きく変わりました。このクライアント側の作業を始めたばかりの場合は、その本を捨てて、より現代的なアプローチを採用することで、おそらく自分に有利になるでしょう。

1 つには、これらの詳細の多くを処理してくれるjQueryなどの優れた JavaScript ライブラリがあります。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 );
        }
    });
}

7 年前の Ajax の本を避けるべきもう 1 つの理由: 私の推測が正しければ、本がこの例のように単純な HTML のダウンロードを過ぎて、JavaScript で操作する生データのダウンロードを開始する場合、おそらく XML を使用することをお勧めします。このデータ。(もちろん、XML は AJAX の "X" です。)

ただし、サーバー上でデータを生成している場合、XML はこれを行うにはひどい方法です。PHP では、XML の代わりに JSON データを簡単に生成できます。JSON は、JavaScript での操作がはるかに簡単かつ高速です。

JavaScript コーディングのためにチェックアウトする必要があるその他のライブラリは、Underscore.jsまたはその新しい兄弟である Lo-Dashです。これらのライブラリには、あらゆる種類のコーディング作業を容易にするさまざまなユーティリティ関数があります。

また、これらのライブラリのいずれかを調べるか、「ベア メタル」JavaScript をコーディングするかにかかわらず、現在ほとんどのブラウザで利用できる開発者ツールに慣れておいてください。私のお気に入りはChrome DevToolsです。

もう1つ。複雑な 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>です。

最後に、コーディング スタイルについて 1 つの提案をさせてください。

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

JavaScript でこれを行うことはお勧めしません。代わりに、次のスタイルを使用します。

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

その理由は、前者のスタイルを使用すると、最終的には次のようになるからです。

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

returnJavaScript の自動セミコロン挿入のため、それが機能するためには、中括弧とその後の中括弧を同じ行に置く必要があります。そこで行う必要があるため、一貫性を保ち、すべてのコードをそのように書くこともできます。

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

コーディング スタイルが個人的な好みであることは承知していますが、ほとんどの JavaScript 開発者は、他の言語で別のスタイルを好む場合でも、この理由からこの波括弧規則に従っていることがわかります。

于 2013-06-15T07:00:30.803 に答える