從XML動態創建HTML div與JS從XML

我正在尋找一點Yoda像一個項目即時通訊工作的指導。我試圖動態生成在基於XML數據從PHP服務器讀入的網頁的div。我衝在我的體重上面，這對學習很有幫助。從XML動態創建HTML div與JS從XML

想知道，如果有人可以點我在正確的方向就一個教程或給我一些指導，看看IM在正確的軌道上等

的XML IM裝載在是...

<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是非常基本的調用與身體標籤加載信息（）函數。

我在尋找正確的方向？有人可以幫我解決或推薦一個教程嗎？

感謝您的時間

來源

2011-07-09 Christopher

這是客戶端的代碼，我用它來動態地創建從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父元素並執行。

來源

2011-07-10 11:48:54 T9b

從XML動態創建HTML div與JS從XML

回答

相關問題