JavaScript - Ajaxのデータ - XMLかJSONか(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-84312-225-5) の15章(Ajaxのデータ - XMLかJSONか)練習問第15-1を解いてみる。

その他参考書籍

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

15-1.

コード(TextWrangler)

var xmlhttp = new XMLHttpRequest();
var drink = encodeURIComponent(document.getElementById('drink').value);
var url = "recipe.php?drink=" + drink;
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = printRecipe;
xmlhttp.send(null);

function printRecipe(o){
  if(xmlhttp.readySate === 4 && xmlhttp.status === 200){
    var body = document.getElementsByTagName("body")[0];
    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);
    body.appendChild(recipe);
  }
}