2012-03-27 18 views
-1

JavaScriptは初めてです。JavaScript - 結果はIEで表示されますが、ChromeやFFでは表示されません

とにかく、IEで動作する次のコードはありますが、ChromeやFFでは動作しません。それは、RedditのRSSからデータを取得し、それを出力するだけです。それだけです。それはIEでのみ動作しています。誰も私がここで間違っていることを説明することはできますか?

<html>                 
<head>                 
<script type="text/javascript"   
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
<script type="text/javascript"> 


var result = null; 
$.ajax({ 
    url: "http://www.reddit.com/.rss", 
    type: 'get', 
    dataType: 'html', 
    async: false, 
    success: function(data) { 
    result = data; 

    } 
}); 

document.write(result); 

</script> 
</head> 
</body> 
</html> 
+2

HTMLが正しく構成されていません。閉じたbodyタグの中に閉じたheadタグがあります。 –

答えて

1

$.ajaxが非同期であるため、競合状態になっています。その代わりに成功ハンドラに結果を表示して、要求が完了したことが保証されるようにします。

$.ajax({ 
    url: "http://www.reddit.com/.rss", 
    type: 'get', 
    dataType: 'html', 
    async: false, 
    success: function(data) { 
     document.write(data); 
    } 
}); 

更新

あなたがfalseに非同期に設定しているので、上記の文は該当しません。しかし、私はあなたの問題の一部であるかもしれないdocument.write()を使用する正当な理由は見つけていません。別の方法を使用して、.html().append()alert()などのようにページにデータを注入してみてください。document.readyの中でこれを行うことには問題ありません。

$(document).ready(function() { 
    var result = null; 
    $.ajax({ 
     url: "http://www.reddit.com/.rss", 
     type: 'get', 
     dataType: 'html', 
     async: false, 
     success: function(data) { 
     result = data; 
     } 
    }); 

    alert(result); 
    $("body").append(result); 
}); 
+1

私はかなりページの読み込みがいくつかの非常に意図していない結果を持っている後document.writeを使用していると確信しています...しかし、ポイントを取った。あなたは私を打つ! :-) – Timmerz

+1

これは真実ではありませんが、async falseは '$ .ajax'への呼び出しが終了する前にsuccessコールバックを実行する必要があります。成功ハンドラの 'document.write'はページ全体を一掃します。 –

+0

asyncフラグはfalseに設定されています。ここでの問題は、実際には、3つのJavascriptエンジンが ''成功 ''コールバックをどのように実行しているかに微妙な違いがあります。これは、IEで実行されているかどうかをチェックするコードによって引き起こされる可能性があります。基本的には、IEとFirefoxは少なくとも2つのイベントがありますが、 - "分割"が "成功"コールバックか、最初の '' $ .ajax''関数かどうかは分かりません。 –

2

はい、このコードは正しく表示されません。競合状態です。 document.writeはすぐに実行されます。 ajaxは時間内に結果を設定しても設定しなくてもかまいません。あなたは成功のイベントでページに結果を追加する必要があります...のようなもの:

$.ajax({ 
    url: "http://www.reddit.com/.rss", 
    type: 'get', dataType: 'html', 
    async: false, 
    success: function(data) { 
    $("#some-div").html(data); 

    } }); 
+0

非同期のままにすることを推奨しない理由はありますか? RSSフィードを取得するのにどれくらい時間がかかります。一度それが到着すると、それをdivに押し込み、その間にトラック運転を続けます。 –

+0

ええ、私は彼のコードをコピーしました。彼はおそらくそれがインラインか何かを実行するレースのためにそこにあったでしょう。私は成功関数に懸念しています。 – Timmerz

+0

ああ、そうだ。なぜか分かりませんが、私のコメントの後までは元のコードを見ていないので、私自身はajaxコールを見ていて、最初に競合状態があるとは思わなかったあなたが言ったけれども!)。空のページをレンダリングするのとは別のやり方をしなければならないでしょう。そして、文書のAjaxコールで非同期が偽になる準備ができました。 –

0

を何、このように処理に関する:

(function(url, callback) { 
    jQuery.ajax({ 
     url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url), 
     dataType: 'json', 
     success: function(data) { 
      callback(data.responseData.feed); 
     } 
    }); 
})('http://www.reddit.com/.rss', function(feed) { 
    var entries = feed.entries, 
     feedList = ''; 
    for (var i = 0; i < entries.length; i++) { 
     feedList += '<li><a href="' + entries[i].link + '">' + entries[i].title + '</a></li>'; 
    } 
    jQuery('.rssfeed > ul').append(feedList); 
}); 

HTML:

<div class="rssfeed"> 
    <h4>RSS News</h4> 
    <ul></ul> 
</div> 

サンプル:http://jsfiddle.net/QusQC/

+0

jQueryバージョンを更新すると、XMLをそのまま処理することができます。 –