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.
Next: Setting up the server response: parsing XML in the server >>
More JavaScript Articles
More By Alejandro Gervasio
