JavaScript - Ajaxのデータ - XMLかJSONか(XML形式のAjaxレスポンスの処理)

初めてのJavaScript 第2版
Shelley Powers (著)
武舎 広幸、武舎 るみ (訳)

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• BBEdit - Bare Bones Software, Inc.(Text Editor)
• Script言語:JavaScript
• JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84312-225-5) の15章(Ajaxのデータ - XMLかJSONか)練習問第15-1を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87312-269-1)

15-1.

メモ: jQuery版で、最初はjQueryクックブックの「レシピ16.6 XMLからDOMへの変換」を参考に、xmlDOMプラグインを使用してdataTypeをxmlにしたけど上手くいかず。。そしてdataTypeをxmlからhtmlに変更したら上手くいった。そこで、xmlDOMプラグインは必要ないんじゃないかな〜と思って、$.xmlDOM(data)とするのではなく、$(data)としたら、上手くDOM操作できた。ということでプラグインを削除。このことに気づくまで少し時間がかかった。

コード(BBEdit)

var xmlhttp = new XMLHttpRequest();
var url = "http://mkamimura.com/kamimura_blog/learning_javascript/sample1.xml";
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = print_recipe1;
xmlhttp.send(null);
function print_recipe1(){
  $('#pre0').append(xmlhttp.readyState + ", " + xmlhttp.status + "\n");
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    $('#pre0').append("成功!\n");
    var d0 = document.getElementById('d0');
    var recipe = document.createElement('div');
    var h3 = document.createElement('h3');
    var title = xmlhttp.responseXML.getElementsByTagName('title')[0].firstChild.nodeValue;
    title = document.createTextNode(title);
    h3.appendChild(title);
    recipe.appendChild(h3);
    var ul = document.createElement('ul');
    var ingredients = xmlhttp.responseXML.getElementsByTagName('ingredient');
    for(var i = 0; i < ingredients.length; i++){
      var li = document.createElement('li');
      var ingredient = ingredients[i].firstChild.nodeValue;
      ingredient = document.createTextNode(ingredient);
      li.appendChild(ingredient);
      ul.appendChild(li);
    }
    recipe.appendChild(ul);
    var p = document.createElement('p');
    var instruction = xmlhttp.responseXML.getElementsByTagName('instruction')[0].
      firstChild.nodeValue;
    instruction = document.createTextNode(instruction);
    p.appendChild(instruction);
    recipe.appendChild(p);
    d0.appendChild(recipe);
  } else {
    $('#pre0').append("通信中か失敗!\n");
  }
}
// jQuery版
var option = { 
  type:'GET', 
  dataType: 'xml',
  url:url,
  success:print_recipe2,
  error:print_error,
  complete: print_end
};

function print_recipe2(data, text_status){
  $('#pre0').append("jQuery版: 成功！" + text_status + "\n");
  var recipe = $(document.createElement('div'));
  var h3 = $(document.createElement('h3'));
  var title = $(data).find('recipe > title').text();
  h3.text(title);
  recipe.append(h3);
  var ul = $(document.createElement('ul'));
  $(data).find('recipe > ingredient').each(function(){
    var li = $(document.createElement('li'));
    li.append($(this).text());
    ul.append(li);
  });
  recipe.append(ul);
  var p = $(document.createElement('p'));
  var instruction = $(data).find('recipe > instruction').text();
  p.append(instruction);
  recipe.append(p);
  $('#d1').append(recipe);
}
function print_error(){
  $('#pre0').append("jQuery版: エラー\n");
}
function print_end(){
  $('#pre0').append("jQuery版: 終了\n");
}
$.ajax(option);

通常版

jQuery版