Home arrow JavaScript arrow Page 2 - JavaScript Remote Scripting: Fetching Server Data with the DOM
JAVASCRIPT

JavaScript Remote Scripting: Fetching Server Data with the DOM


This article provides 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. If you’re inclined to work very close to W3C standards, this is an approach worth considering, since it allows the implementation of Web services through a cross-domain integration.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 11
October 12, 2005
TABLE OF CONTENTS:
  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

print this article
SEARCH DEVARTICLES

JavaScript Remote Scripting: Fetching Server Data with the DOM - One step toward standardization: making http requests with the DOM
(Page 2 of 5 )

In order to demonstrate how to use standard DOM constructs to implement remote scripting, my trusty example will be similar to the script you saw in my previous article. Essentially, I’ll build an extensible JavaScript program, which will be able to request an XML file to the server. This in turn will parse this file and send the data back to the client in the form of standard-compliant JavaScript code. Once the parsed data has been received, it will be displayed through a headlines sequencing mechanism.

Even when the programming logic above described is quite simple, the example will be helpful for understanding how to handle http requests without the need to look at AJAX. Considering this possibility, I’ll define the first function of the script, “sendRequest()”, which accepts the name of the file to be requested and fetches the file by using only a few DOM methods. Its definition is as follows:

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

As I explained before, the above function only uses standard DOM methods to request a given file. It takes the file name as an argument and builds a <script> node on the fly, by specifying a couple of attributes for the element just created. Just take a look at the line below:

js.setAttribute
('src','http://www.mydomain.com/scripts/script_file.php?
file='+file);

Once the <script> node has been appended to the document tree, this statement is really instructing the browser to request the URL specified as the value for the “src” attribute. As a result, if I’d pass in as an argument a “news.xml” file, like this:

'http://www.mydomain.com/scripts/script_file.php?file=news.xml

the specified file would be requested, and incidentally all the code –- server and client statements -- would also be executed. On the plus side, the above method eliminates the limitations imposed by AJAX, since it allows you to silently request files from any domain, while AJAX will only fetch documents from the originating server (except when the script is run as localhost).

By way of returning to the pertinent function, that’s all the required JavaScript code to fetch files from the server through the DOM, without being restricted by the security model implemented on most browsers. So, the next step is to study the code that will be run on the requested file “script_file.php”, in order to define the remaining JavaScript functions, along with some PHP XML parsing statements.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials