AJAXがうまくいかない。

質問

AJAXがうまくいかない。
http://schoo.jp/class/1868
こちらの動画でajaxを使ってhtmlにもともとないニュースを非同期通信で追加する方法をやっているのですが、htmlは表記されてもニュースが追加されません。

lv9の無料連鎖場にアップロードしてみたところ下記二つ自体は見れます。
ドメイン/test/ajax-test/rss.xml
ドメイン/test/ajax-test/

・
ress.xml
<sy:updatePeriod>hourly</sy:updatePeriod>
<sy:updateFrequency>1</sy:updateFrequency>
<generator>http://wordpress.org/?v=4.1.1</generator>
<item>
<title>Bootstrap Studio</title>
<link>http://blog.h2o-space.com/2015/03/640/</link>
<comments>http://blog.h2o-space.com/2015/03/640/#comments</comments>
<pubDate>Mon, 16 Mar 2015 23:32:25 +0000</pubDate>
<dc:creator><![CDATA[TANIGUCHI Makoto]]></dc:creator>
<category><![CDATA[メモ]]></category>
<category><![CDATA[bootstrap]]></category>

<guid isPermaLink="false">http://blog.h2o-space.com/?p=640</guid>
<description><![CDATA[<p>Bootstrapのデザインツール。Web上のサービスが多い昨今ですが、こちらのツールは Windows/Mac/Linux向けのデスクトップアプリケーションとしてリリースされるようです。 2015年 3月リリース予定で … <a href="http://blog.h2o-space.com/2015/03/640/" class="more-link">続きを読む <span class="screen-reader-text">Bootstrap Studio</span></a></p>
<p>The post <a rel="nofollow" href="http://blog.h2o-space.com/2015/03/640/">Bootstrap Studio</a> appeared first on <a rel="nofollow" href="http://blog.h2o-space.com">H2O BLOG</a>.</p>
]]></description>
<content:encoded><![CDATA[<p>Bootstrapのデザインツール。Web上のサービスが多い昨今ですが、こちらのツールは Windows/Mac/Linux向けのデスクトップアプリケーションとしてリリースされるようです。</p>
<p>2015年 3月リリース予定で、現在メールニュース購読者を募集しています。</p>
~

・
index.html
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
// ここ
$.ajax({
url: 'rss.xml',
dataType: 'xml',
async: ture,
success: function(xml) {
make_news(xml);
}
});

function make_news(xml) {
var html = '';

$(xml).find('channel item').each(function() {
html += '<li><a href="' + $(this).find('link').text() + '">' + $(this).find('title').text() + '</a></li>';
});
$('#news').html('<ul>' + html + '</ul>');
}
</script>
まさかlv9などの無料連鎖場ではクライアントサイドのajaxが使えないなんてことはないですよね

回答No.1

hymat · ベストアンサー

(1)実行中のディレクトリに"jquery-2.1.3.min.js"のファイルはありますか？ 無ければ、
<script type="text/javascript" src="jquery-2.1.3.min.js"></script> を
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> に書き換えます。
(2)"async: ture"はスペルミスなので、"async: true"に書き換えます。
(3)html内に、実行結果が表示されるはずの "news"というidを持つ要素が無いので、これでは何も表示されません。<div id="news">xxxxxxxx</div> 等として記述を追加します。
(4)"ress.xml"は"rss.xml"の間違いと思いますが、ファイルの内容もxmlとして正しくありません。
(5)xml内に "channel item"、"link"、"title"という要素が無いので、これでは何も検索できません。そういう名前の要素を記述しておきます。ただし要素名に空白は使えないので、ここでは "channel item" を "channel_item" とします。
-----------------------------
したがって、xmlファイルは
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE channel_item>
<channel_item>
<link>http://www.this.is.the.link target/</link>
<title>linking text</title>
</channel_item>
のような形式でなければなりません。その上でindex.htmlを
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'rss.xml',
dataType: 'xml',
async: true,
success: function(xml) {
make_news(xml);
}
});
function make_news(xml) {
var html = '';
$(xml).find('channel_item').each(function() {
html += '<li><a href="' + $(this).find('link').text() + '">' + $(this).find('title').text() + '</a></li>';
});
$('#news').html('<ul>' + html + '</ul>');
}
</script>
<div id="news">xxxxxxxx</div>
とすれば動きます。

お礼

async: trueが原因でした。
気づかないもんですね。
言われてみればブール値なのに紫になっていませんでした。

白はスペルミスと覚えるしかないですね。