XMLからJSを使用して動的にHTML divを作成する

Question

私は作業中のプロジェクトの指導のようなヨーダのビットを探しています。私は動的にphpサーバーから読み込まれているXMLデータを中心にWebページにdivを生成しようとしています。私の経験の重さの上にちょっとパンチして、それは学習に良いです。誰かが限り正しい方向にチュートリアルを私を指すか、私など正しい軌道上のイム

におけるXMLのイム・ロードがあるかどうかを確認するためにいくつかのガイダンスを与えることができれば

は

...思っていました

<item> 
     <id>1</id> 
     <name>Johnothan</name> 
     <message>hello world</message> 
</item> 
<item> 
     <id>2</id> 
     <name>Fredrico</name> 
     <message>hello world</message> 
</item>...etc 

私のAjax関数が呼び出します。

function ajax(site, params){ 
    var xmlhttp; 
    var i; 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
{// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    xmlDoc=xmlhttp.responseXML; 
    } 
    } 


    xmlhttp.open("POST", site, false); 
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 


    xmlhttp.send(params); 
    } 

JS本部生成

function information(){ 

xmlReturned = xmlDoc.getElementsByTagName("item"); 

for (i=0; i<xmlReturned.length; i++){ 

newDiv(i); 




function newDiv(i){ 
var id = xmlReturned[i].getElementsByTagName("id")[0].firstChild.nodeValue; 
var name = xmlReturned[i].getElementsByTagName("name")[0].firstChild.nodeValue; 
var message = xmlReturned[i].getElementsByTagName("message")[0].firstChild.nodeValue; 


//Now im trying to place the dynamic XML information within a table with in a new DIV in the HTML. 



} 

私のHTMLは、bodyタグの負荷の情報（）関数を呼び出し、かなり基本的なものです。

私は正しい方向に見ていますか？誰かが私を助けたり、チュートリアルを推薦できますか？お時間

Answer 1

このため

おかげで、私は動的にJSONからHTMLページ要素を作成するために使用するクライアント側のコードです。

基本的に私はデータベースから選択するサーバーサイドスクリプトを持っています。データベースには、要素IDや内部HTMLテキストなどが含まれます。データは、サーバー側でJSONとしてエンコードされます。あなたの例では、XMLを使用しますが、原則は同じです。

私はそれ自身のJavaScriptファイルにこのコードを保存するには、"buildCategories.js"と呼ばれる：

buildAjaxRequest = function() 

{ 
/*create an ajax variable*/ 
var ajaxRequest; 


try 
{ 
    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
} 

catch (e) 
{ 
    // Internet Explorer Browsers 
    try 
    { 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } 

    catch (e) 
    { 
     try 
     { 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     catch (e) 
     { 
      /* Something went wrong*/ 
      alert("Your browser does not support AJAX!"); 

      /* do nothing*/ 
      return false; 
     } 
    } 
} 
return ajaxRequest; 
}; 


buildcategories = function() 
{ 
var ajaxRequest = buildAjaxRequest(); 

    // run on development box 
    var url = "urlToTheJSONEncodingScript"; 

     /*go ajax go!*/ 
     ajaxRequest.open("GET", url, true); 
     ajaxRequest.send(null); 


    ajaxRequest.onreadystatechange=function() 
    { 
     if (ajaxRequest.readyState==4 && ajaxRequest.status==200 || ajaxRequest.status==0) 
      { 
      var categoriesObject = JSON.parse(ajaxRequest.responseText); 

      // example of how to retrive the data 

      //theParentElementYouWantToAppendTo 
      var list = document.getElementById("theParentElementYouWantToAppendTo"); 

      for (i=0;i<categoriesObject.Categories.length;i++) 
      { 
      newElement = categoriesObject.Categories; 
      // The div you are dynamically creating 
      listRow = document.createElement("div"); 

      listRow.id = newElement[i].categoryID; 
      listRow.innerText = newElement[i].category_desc; 
      listRow.className = "theClassYouWantToUse"; 

        //theParentElementYouWantToAppendTo.appendChild(theDivYouCreated)    
        list.appendChild(listRow); 


      } // end for 


      }// 

    } 
}; 

buildcategories(); // VERY IMPORTANT. SELF EXECUTING FUNCTION! 

最後のピースは自分のHTMLに

<div id="theParentElementYouWantToAppendTo"> 
    <script language="JavaScript" type="text/javascript" src="buildCategories.js"></script> 
</div> 

のようなものを挿入するには、基本的にこれは自己実行中のスクリプトと呼ばれ、ページが提供されたとき。私はheadに入れません。スクリプトが提供される前にHTMLの親要素がクライアント側で受け取られ、実行されていることを確認する必要があるからです。