JavaScript - Ajaxのデータ(XML)

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

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• TextWrangler(Text Editor) (BBEditの無料、light版)
• Script言語:JavaScript
• JavaScript Library: jQuery

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

その他参考書籍

• JavaScript 第5版 David Flanagan (著), 村上 列 (翻訳)
• JavaScriptクイックリファレンス David Flanagan (著), 木下 哲也 (翻訳), 福龍興業 (翻訳)
• 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)

15-1.

コード(TextWrangler)

var xmlhttp = new XMLHttpRequest();
var url = "recipe.php?drink=" + drink;
xmlhttp.open("GET",url,false);
xmlhttp.onreadystate =  printRecipe;
xmlhttp.send(null);

function printRecipe(){
  if(xmlhttp.readyState == 4 && 
    xmlhttp.status == 200){
    var recipe = document.createElement('div');
    recipe.id = 'recipe';
    var p = document.createElement('p');
    var h = document.createElement('h3');
    var title = xmlhttp.responseXML.getElementsByTagName('title')[0].firstChild.nodeValue;
    var text = document.createTextNode(title);
    h.appendChild(text);
    recipe.appendChild(h);
    var ul = document.createElement('ul');
    var ingredients = xmlhttp.responseXML.getElementsByTagName('ingredient');
    var ingredient = "";
    for(var i = 0;i < ingredients.length;i++){
      var l = document.createElement('li');
      ingredient = ingredients[i].firstChild.nodeValue;
      text = document.createTextNode(ingredient);
      l.appendChild(text);
      ul.appendChild(l);
    }
    recipe.appendChild(ul);
    var instruction = xmlhttp.responseXML.getElementsByTagName('instruction')[0].firstChild.nodeValue;
    text = document.createTextNode(instruction);
    p.appendChild(text);
    recipe.appendChild(p);
    var b = document.getElementsByTagName('body')[0];
    b.appendChild(recipe);
  }
}