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();

As you can see, the only points worth noting with reference to the above code is first, the call to the “sendRequest()” function after the document has been loaded, and second, the execution of both the “createDataContainer()” and “displayData()” functions respectively.

In a practical sense, if you run the complete script, including both files, you’ll get an output similar to this:

Even when the above screenshot doesn't provide the coolest look and feel for displaying headlines, it does demonstrate how XML data can be pulled out from the server and outputted directly to the browser, by utilizing only standard DOM methods (remember that AJAX isn’t a W3C standard yet).

With this example, I’m winding up my journey for showing some illustrative code for fetching data with the DOM, so join me to read the corresponding conclusions.

Wrapping up

As I said before, we’re done for now. Throughout this part of the series, I’ve provided you with a handy method for making JavaScript-based requests to the server and serving XML documents, all without the need to use AJAX technology. Moreover, if you’re inclined to work very close to W3C standards, this is an approach worth considering, taking into account that it allows the implementation of Web services through a cross-domain integration.

Over the next tutorial, I’ll be explaining how to use remote scripting –- particularly AJAX -- to display randomly-generated characters, useful for integrating into any application that requires real protection against simulated user input. You won’t want to miss it!


DISCUSS ARTICLE

GET NEWSLETTER

SEND ARTICLE

PRINT VERSION

PDF VERSION


   

JavaScript Articles


- JavaScript Remote Scripting: Fetching Server...
- Exception Handling in JavaScript: Addressing...
- JavaScript Remote Scripting: Processing XML ...
- Exception Handling in JavaScript: Validating...
- Validators: Concluding Remarks
- Exception Handling in JavaScript: Catching U...
- JavaScript Remote Scripting: Reading Data Fr...
- Exception Handling in JavaScript: Using Mult...
- Validators: Into the Deep
- Building a CHAP Login System: An Object-Orie...
- Exception Handling in JavaScript: Introducti...
- Building a CHAP Login System: Coding Server-...
- Validators: Introducing Struts Validator Fra...
- Building a CHAP Login System: Encrypting Dat...
- The Power of Javascript: Controlling the Exe...


More by Alejandro Gervasio


- JavaScript Remote Scripting: Fetching Server...
- Exception Handling in JavaScript: Addressing...
- JavaScript Remote Scripting: Processing XML ...
- Exception Handling in JavaScript: Validating...
- Exception Handling in JavaScript: Catching U...
- JavaScript Remote Scripting: Reading Data Fr...
- Exception Handling in JavaScript: Using Mult...
- Building a CHAP Login System: An Object-Orie...
- Exception Handling in JavaScript: Introducti...
- Building a CHAP Login System: Coding Server-...
- Building a CHAP Login System: Encrypting Dat...
- Programmatic POST Requests with JavaScript: ...
- Programmatic POST Requests with JavaScript: ...
- Programmatic POST Requests with JavaScript: ...
- Programmatic GET Requests with JavaScript: S...



Blog Banter


Pentax, Samsung unit in digital camera tie-up 9:06 am EST

Japan's Pentax Corp. (7750.T) said on Wednesday it has tied up with a unit of South Korea's Samsung Electronics (005930.KS) to jointly develop digital single lens reflex (SLR) cameras, aiming to po... More | Discuss
EU Pushes for Online Music Copyright 9:06 am EST

The European Union called on Europe's music industry Wednesday to create EU-wide copyright licenses for online music, saying this would boost demand for legal downloads. More | Discuss
Apple's record fourth quarter called 'disappointing' 8:06 am EST

Apple Computer reported a record fourth quarter, but that wasn't enough for Wall Street because Apple's results weren't as robust as some analyst estimates. Apple had its best quarter ever for iPod sa... More | Discuss
Nokia launches new corporate phone line-up 8:06 am EST

Mobile phone giant Nokia said on Wednesday it was launching three new mobile devices for business users, to hit the shelves in the first quarter of next year. More | Discuss
London bomb survivor sets up victim Web site 8:06 am EST

Canadian Peter Zimonjic had never seen a corpse before being caught up in the London suicide bomb attacks that killed 52 people in July. More | Discuss
Past Technology News

Scripts.com
Dev Articles - Your Multi-Platform Development Source Dev Articles
Get This For Your Site!
 
» JavaScript Remote Scripting: Fetching Server Data with the DOM in: JavaScript
 
» Exception Handling in JavaScript: Addressing Browser Incompatibilities in: JavaScript
 
» Temporary Variables: Chasing Temporaries Away in: C++
 
WEBSITE HOSTING
Dev Shed - The Open Source Web Development Site Dev Shed
Get This For Your Site!
 
» Caching Result Sets in PHP: A Content-Change Triggered Caching System in: PHP
 
» Generic Architecture for Caching Table Data: Supercharge Your PL/SQL Applications in: Oracle
 
» Caching Result Sets in PHP: The Barebones of a Caching Class in: PHP
 
Coldfusion
ASP Free - Your Source For ASP Source Code and More... ASP Free
Get This For Your Site!
 
» IIS 6.0, Getting Information Using WMI in: IIS
 
» Understanding and Creating an Access Project in: Microsoft Access
 
» ASP.NET Custom Server Controls: Dynamically Expandable Round Cornered Button in: ASP.NET
 
WEBSITE DESIGN
Dev Hardware - Your Home for Hardware Resources Dev Hardware
Get This For Your Site!
 
» DARPA’s Grand Challenge: A Real Race This Time! in: Opinions
 
» Swiftech MCW6002-64 and MCW50+T Waterblocks in: PC Cooling
 
» Modding 101: The Basics in: Computer Cases
 
$7.95/mo. Web Hosting
SEO Chat - Search Engine Optimization SEO Chat
Get This For Your Site!
 
» Search Engine Optimization and CSS in: Search Optimization
 
» Google-Sun Alliance: Big Bore or Big News? in: Search Engine News
 
» Improve Your Rankings with a Sitemap That Works: The HTML in: Search Optimization
 
#1 BEST WEB HOSTING 2004
Dev Mechanic - Webmaster Tools, Developer Tools, Programming Tools Dev Mechanic
Get This For Your Site!
 
» Relax Your Clients And Improve Your Sales! in: Online Business Help
 
» Developing an eBook as a Marketing Tool. Simple and Easy! in: Website Marketing
 
» How Blogs And RSS Boost Your Search Engine Visibility in: Blog Help
 
Website Marketing
Web Hosters - Find Webhosting Now! Web Hosters
Get This For Your Site!
 
» Keeping Connected to Your Web Hosting Business in: Web Hosting Articles
 
» Web Hosting Community Rallies around New Orleans in: Web Hosting News
 
» Heroic Web Hosting: DirectNIC vs. Katrina in: Web Hosting News
 
Free Programming Scripts
Developer Shed Blog - Technical Professionals Discuss Todays Topics... Dev Blog
Get This For Your Site!
 
» Apple`s record fourth quarter called `disappointing` - Discuss
 
» Nokia launches new corporate phone line-up - Discuss
 
» London bomb survivor sets up victim Web site - Discuss
 
Developer Newsletter
                        Add Mozilla Sidebar | Bookmark this site | WAP support for your phone | Klip for KlipFolio
Dev Shed Forums | ASP Free Forums | Dev Articles Forums | Dev Hardware Forums | SEO Chat Forums | Dev Archives Forums
 
 
© 2001-2005. All rights reserved. (Privacy Policy) Dev Articles Cluster 4 hosted by HostwaySupport
 

Generated in 0.395519 sec.