AJAX XML 实例

最新推荐文章于 2022-11-11 08:35:26 发布

杨四郎2018

最新推荐文章于 2022-11-11 08:35:26 发布

阅读量597

点赞数

文章标签： AJAX XML 实例

AJAX XML 实例

AJAX 可用来与 XML 文件进行交互式通信。

AJAX XML 实例

下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息：

实例

尝试一下 »

实例解析 - loadXMLDoc() 函数

当用户点击上面的"获取我收藏的 CD"这个按钮，就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用 XML 数据的填充 id="demo" 的表格元素：

LoadXMLDoc()

 
   function 
     
   loadDoc 
   ( 
   ) 
     
   { 
     
   var 
     
   xhttp 
    =  
   new 
     
   XMLHttpRequest 
   ( 
   ) 
   ;  
   xhttp 
   . 
   onreadystatechange 
    =  
   function 
   ( 
   ) 
     
   { 
     
   if 
     
   ( 
   this 
   . 
   readyState 
    ==  
   4 
    &&  
   this 
   . 
   status 
    ==  
   200 
   ) 
     
   { 
     
   myFunction 
   ( 
   this 
   ) 
   ;  
   } 
     
   } 
   ;  
   xhttp 
   . 
   open 
   ( 
   " 
   GET 
   " 
   ,  
   " 
   cd_catalog.xml 
   " 
   ,  
   true 
   ) 
   ;  
   xhttp 
   . 
   send 
   ( 
   ) 
   ; 
   } 
    
   function 
     
   myFunction 
   ( 
   xml 
   ) 
     
   { 
     
   var 
     
   i 
   ;  
   var 
     
   xmlDoc 
    =  
   xml 
   . 
   responseXML 
   ;  
   var 
     
   table 
   = 
   " 
   <tr><th>Artist</th><th>Title</th></tr> 
   " 
   ;  
   var 
     
   x 
    =  
   xmlDoc 
   . 
   getElementsByTagName 
   ( 
   " 
   CD 
   " 
   ) 
   ;  
   for 
     
   ( 
   i 
    =  
   0 
   ;  
   i 
    < 
   x 
   . 
   length 
   ;  
   i 
   ++ 
   ) 
     
   { 
     
   table 
    +=  
   " 
   <tr><td> 
   " 
    +  
   x 
   [ 
   i 
   ] 
   . 
   getElementsByTagName 
   ( 
   " 
   ARTIST 
   " 
   ) 
   [ 
   0 
   ] 
   . 
   childNodes 
   [ 
   0 
   ] 
   . 
   nodeValue 
    +  
   " 
   </td><td> 
   " 
    +  
   x 
   [ 
   i 
   ] 
   . 
   getElementsByTagName 
   ( 
   " 
   TITLE 
   " 
   ) 
   [ 
   0 
   ] 
   . 
   childNodes 
   [ 
   0 
   ] 
   . 
   nodeValue 
    +  
   " 
   </td></tr> 
   " 
   ;  
   } 
     
   document 
   . 
   getElementById 
   ( 
   " 
   demo 
   " 
   ) 
   . 
   innerHTML 
    =  
   table 
   ; 
   } 
  