jQuery ajaxでXMLとかJSONとかJSONPとか取得 - 1

JavascriptのライブラリjQueryでXMLとかのデータを取得するまとめ。

jQuery・・・JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。

　　　　　　　　　ライブラリでは一番有名かも。

今回はjQueryでXMLファイルの読み込み。

基本jQueryのajax関数を使用してデータを取得し、それを要素にappendしていく。

  波平
  
    サザエ
    カツオ
    ワカメ
  


  ヒロシ
  
    さきこ
    ももこ
  

ではよくある読み込み処理

// ロード時に呼び
$(window).load(function(){
  $.ajax({
    type: "GET",         // HTTP通信 GET/POST
    url: "sample.xml",   // リクエストURL
    dataType: "xml",    // データ型 xml/json/jsonp/script/text

    // 成功時に呼び出せる処理
    success: function(xml) { readXML(xml); }
  });
});

// 読み込み処理
function readXML(xml){
  // ループ処理 Family要素でループ
  $(xml).find("family").each(function(){
    $("#familyList").append($(this).attr("name"));
    $("#familyList").append("父:" + $(this).find("father").text() + "
");
    // 子供でループ
    $(this).find("child").each(function(){
      $("#familyList").append("子:" + $(this).text() + "
");
    });
  });
}

// 以下に書き込まれる

今回はここまで