DS HomeDev Shed | ASP Free | Dev Articles | Scripts | Dev Hardware | Dev Archives | SEO Chat | Dev Mechanic | Web Hosting
      JavaScript
igrep Developer Search
Home arrow JavaScript arrow JavaScript Remote Scripting: Fetching Server Data with the DOM
 
igrep Developer Search
  ADO.NET  
  Apache  
  ASP  
  ASP.NET  
  C#  
  C++  
  ColdFusion  
  COM/COM+  
  Delphi/Kylix  
  Design Usability  
  Development Cycles  
  DHTML  
  Embedded Tools  
  Flash  
  Graphic Design  
  HTML  
  IIS  
  Interviews  
  Java  
  JavaScript  
  MySQL  
  Oracle  
  Photoshop  
  PHP  
  Reviews  
  SQL  
  SQL Server  
  Style Sheets  
  VB.Net  
  Visual Basic  
  Web Authoring  
  Web Services  
  Web Standards  
  XML  
  Developer Forums  
  Forums Archive  
  Get Daily Updates  
  Plug In PDF Mag.  
  Developer Updates  
  Free Website Content  
  Weekly Newsletter  
  Web Hosting
 
  ASP Web Hosting
 
  ASP.NET Web Hosting  
  Budget Hosting  
  Coldfusion  
  Colocation  
  Dedicated Servers
 
  E-Commerce Hosting  
  Linux Web Hosting
 
  Managed Hosting  
  Reseller Web Hosting
 
  Shared Hosting  
  Small Business Hosting
 
  Virtual Private Servers
 
  Windows Web Hosting
 
  Articles:  
Blogs:  
  Forums:  
  Blog History  
  Article Discussion  
  Games  
  Hardware  
  How Tos  
  Law  
  Microsoft  
  Open Source  
  Security  
  SEO  
  Software  
  Technology News  
  Web Hosting  
  Wow  
  Past Technology News
  Apress Books
  Write For Us Get Paid  
  Request Media Kit
  Contact Us  
  Site Map  

JavaScript


JavaScript Remote Scripting: Fetching Server Data with the DOM
Contributed by Alejandro Gervasio
Article Rating:starstarstarstarstar / 1
2005-10-12
Poor Best
[ Send Me Similar Content When Posted ]
 
[ Add Developer Shed Headlines To Your Site ]

Discuss This Article
DISCUSS
Developer Newsletter
NEWS
E-mail This Article
SEND
Print This Article
PRINT
PDF Version
PDF
 

Article Index:

  1. JavaScript Remote Scripting: Fetching Server Data with the DOM
  2. One step toward standardization: making http requests with the DOM
  3. Setting up the server response: parsing XML in the server
  4. Displaying XML data: defining the “createDataContainer()” and “displayData()” functions
  5. Putting the pieces together: showing the complete script
  6. Search For More Articles!
  7. Author Terms
 
 
JavaScript Remote Scripting: Fetching Server Data with the DOM - Putting the pieces together: showing the complete script
( Page 5 of 5 )

Considering that the script is comprised of two core files, first I’ll show the file responsible for fetching XML data, and second the file that parses and displays the headlines. Having said that, the “requester.htm” file looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>FETCHING XML DATA WITH THE DOM</title>
<script type="text/javascript">
function sendRequest(file){
    // create <script> element
    var js=document.createElement('script');
    // assign <script> attributes
    js.setAttribute('language','javascript');
    js.setAttribute
('src','http://www.mydomain.com/scripts/script_file.php?
file='+file);
    // append element to document tree & send GET request
    document.getElementsByTagName('head')[0].appendChild(js);
}
// execute program when page is loaded
window.onload=function(){
    // check if browser is DOM compatible
    if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
        // load data file
        sendRequest('news.xml');
    }
}
</script>
<style type="text/css">
#container {
    background: #ffc;
    padding: 5px;
    border: 1px solid #00c;
}
li {
    margin-top: 3px;
}
a:link,a:visited {
    font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
    color: #00f;
}
a:hover {
    color: #f00;
}
</style>
</head>
<body>
</body>
</html>

And, with reference to the second file “script_file.php”, here’s its definition:

<?php
header('Content-Type: text/javascript');
echo 'var URL=new Array();var TITLE=new Array();';
// read XML file
$content=file_get_contents($_GET['file']);
// store XML file contents in array
$xml_parser=xml_parser_create();
xml_parse_into_struct($xml_parser,$content,$vals);
xml_parser_free($xml_parser);
// store titles in TITLE array & urls in URL array
foreach($vals as $key=>$value){
    if($value[tag]=='URL'||$value[tag]=='TITLE'){
        echo $value[tag].'['.$value[tag].'.length]=\''.$value
[value].'\';';
    }
}
?>
// create data container
function createDataContainer(){
    var div=document.getElementById('container');
    if(div){return};
    var div=document.createElement('div');
    div.setAttribute('id','container');
    document.getElementsByTagName('body')[0].appendChild(div);
}
// display data
function displayData(){
    // reset data container
    document.getElementById('container').innerHTML='';
    var ul=document.createElement('ul');
    document.getElementById('container').appendChild(ul);
    for(var i=0;i<URL.length;i++){
        // create links
        var li=document.createElement('li');
        var a=document.createElement('a');
        // assign 'href' attribute
        a.setAttribute('href',URL[i]);
        // add link labels
        a.appendChild(document.createTextNode(TITLE[i]));
        li.appendChild(a);
        ul.appendChild(li);
    }
    // remove <script> node
    var js=document.getElementsByTagName('script')[0];
    js.parentNode.removeChild(js);
    // reset array values
    URL=null;
    TITLE=null;
    // update headlines each 1 hour
    setTimeout("sendRequest('news.xml')",3600*1000);
}
// create data container
createDataContainer();
// display data
displayData();

Discuss JavaScript Remote Scripting: Fetching Server Data with the DOM
 
Over this article, find out how to make silent http requests, by using only the DOM....
>>> Post your comment now!
 

DISCUSS ARTICLE

GET NEWSLETTER

SEND ARTICLE

PRINT VERSION

PDF VERSION


   



Scripts.com
Generated in 0.395519 sec.