XML

HTML5, CSS3 and JavaScript Experiments and Insight Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

Advertisements

Useful JavaScript Classes and Functions

  • Crossbrowser image reflections enabler JavaScript class.
  • JavaScript Mapper Class for RESTFul Methods – Recently I had to work with a bunch of RESTFul API methods, so instead of defining manually separate calls/methods for each API request, I decided to do it viceversa – to force JavaScript to create these methods automatically for me out of the RESTFul API by providing the URLS and other required data.
  • XML to JSON JavaScript Objectifier Class – Simple XML to JSON objectifier. It can be used with custom or public XML, REST APIs such as Last.FM, RSS and ATOM feeds, sitemaps, etc by converting the XML server responses to native JSON objects in the browser which are then instantly accessible by its simple to use JavaScript methods.
  • URI to JSON Serializer Class – Tiny JavaScript class, using the HTMLAnchorElement interface to convert URI string into a JSON object.  The object returned by the function contains hash, host, hostname, parameters key-value map, pathname, port and protocol. Works with all major browsers (Firefox, Chrome, Safari, Opera, IE6-10).
  • IMDB Fetcher – Experimental IMDB JavaScript and PHP API – Makes possible the execution of cross-domain AJAX queries to IMDB and returns a JSON data object for the requested movie. What is currently supported – movie title, poster, release date, description, actor(s), director(s), IMDB and MPAA rating, running time, etc.
  • Quick and Dirty Localization With JavaScript – A quick and dirty JavaScript localization routine that provides basic localization (no support for plurals, etc), operates on the DOM of the page and uses data-lang attribute for language keys storage. Lokalizr works with all major browsers, beginning with IE8.
  • JavaScript Instance Name Finder – Small JavaScript function that checks for instances of an object within a defined scope and returns an array of instances’ variable names that can be used for different purposes.
  • HTML5 Placeholder Enabler – The solution presented in this post checks for the availability of the placeholder attribute in textboxes, and if it is not available applies its content as value to the elements that contain it.
  • HTML 5 Details Element Enabler – According to WhatWG, the “<details /> element represents a disclosure widget from which the user can obtain additional information or controls“. In brief, you can use it to create panelbar elements without JavaScript, as the expand / collapse functionality is native to it. Currently (October, 2011), the only browser which supports <details /> is Google Chrome, so if you are eager to start using this element on your pages, you can do so with the help of a few lines of JavaScript to make sure it works on all browsers.
  • WebWorkers JavaScript class.
  • Classless JavaScript inheritance.
  • JavaScript class augmenter.
  • JavaScript API for TinyURL.
  • HTML Validation Bookmarklet.
  • JavaScript Template Engine.

XML to JSON JavaScript Objectifier

AcidJs.XmlToJson() JavaScript class is a simple XML to JSON converter and objectifier. It can be used with custom or public XML, REST APIs such as Last.FM, RSS and ATOM feeds, sitemaps, etc by converting the XML server responses to native JSON objects in the browser which are then instantly accessible by its simple to use JavaScript methods.

Requirements

  • Modern browser with native JSON support. To enable in older browsers, use Douglas Crockford’s JSON2 or one of the various solutions on the Internet.
  • Web Server.
  • PHP.

Usage and API

Copy the entire AcidJs.XmlToJson/ directory from the distribution file, which can be downloaded at this page in the root of your project, then register the run-time script before the closing </body> tag of the page:

<script src="AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>
(function() {
    window.xmltojson = new AcidJs.XmlToJson();
})();

If you wish to keep the AcidJs.XmlToJson/ directory on another location, you can use the optional rootFolder property in the object initializer, and then make sure you also change the path in the SRC attribute of the script tag you used to register the XmlToJson runtime:

<script src="Scripts/AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>
(function() {
    window.xmltojson = new AcidJs.XmlToJson({
        rootFolder: "Scripts/" // do not forget the trailing slash
    });
})();

Once you initialize XmlToJson you will have access to the following methods:

getRemoteData(config)
Request XML, convert it to JSON on the server, then set and optionally return the JSON object. In the config you can defin the following properties: name, url, params (optional) and success callback (optional):

window.xmltojson.getRemoteData({
    name: "slayer", // unique name that will be used to request the converted XML to JSON object locally
    url: "http://ws.audioscrobbler.com/2.0/", // remote / RESTFul service URL
    params: [{
            method: "album.getinfo"
        },{
            api_key: "XXXXXX" // your Last.FM API key
        },{
            artist: "Slayer"
        },{
            album: "Seasons in the Abyss"
        }
    ],
    success: function(data) {
        // the success call back returns the newly created data object that contains the converted JSON object and the config of the getRemoteData method
        console.log("data object: ", data); // return the entire data object
        console.log("JSON object: ", data.json); // return the converted XML to JSON object only
        console.log("data object name: ", data.name); // return the name of the data object
        console.log("request url: ", data.url); // return the request url
        console.log("request parameters as objects: ", data.params); // return the remote request parameters as objects
        console.log("removte request with the params as get data: " + data.remoteUrl); // return the removte request with the params as get data
    }
});

getLocalData(name)
Returns the local instance of an existing JSON data object by it’s name (set in the name property of the config of the getRemoteData method)

window.xmltojson.getLocalData("slayer");

deleteData(data)
Deletes an array of stored data object(s) by specified name and makes them unavailable.

window.xmltojson.deleteData(["slayer", "rss", "feedburner"]);

Examples

Get Artist and Album Data from Last.FM (http://last.fm):

window.xmltojson.getRemoteData({
    name: "slayer", // unique name that will be used to request the converted XML to JSON object locally
    url: "http://ws.audioscrobbler.com/2.0/", // remote / RESTFul service URL
    params: [{
            method: "album.getinfo"
        },{
            api_key: "XXXXXX" // your Last.FM API key
        },{
            artist: "Slayer"
        },{
            album: "Reign in Blood"
        }
    ],
    success: function(data) {
        console.log(data.json);
    }
});

Get RSS feed from Feedburner (http://feedburner.com)

window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://feeds.feedburner.com/acidmartin",
    success: function(data) {
        console.log(data.json);
    }
});

Parse Sitemap File

window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://acidjs.wemakesites.net/sitemap.xml.php",
    success: function(data) {
        console.log(data.json);
    }
});

Using XmlToJson

Related Posts

Acid.JS Library 3.1 Has Been Released With 1 New Script

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

AJAX Scripts Collection 2008-2009

Visit the new website of Acid.JS web 2.0 Component Library.

Acid.JS Library 3.0 Has Been Released With 6 New Additions

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Download the latest version of Acid.JS

TinySite.XML AJAX Content Management System 2.0 Has Been Released

TinySite.XML is a lightweight and fully AJAX driven content management system for personal websites, blogs or band websites.

CMS is an application used to store, retrieve, modify or delete information, format it in a certain manner with a minimal effort. A CMS system also provides ready made tools that are used for interaction between the owners of the website built on top of that CMS with their visitors.

TinySite.XML has it all – page editor, drag-and-drop layout editor, themes, contact form, gallery, events / tourdates module, powerful form-element replacement components that add up to the almost flash-like experience, RSS and news editor and a couple of other cool add-ons that make the stay on the website pleasant.

Almost a year later after the first release, the new version is finally out with 100% reconsodered and rewritten public and admin part, rendering and tons of new features.

What’s new in version 2.0:

– Extremely fast rendering, improved themes and modules.
– Fully functional admin panel, where you can control most of the functions of the public website – change themes, add news / rss, set questions and answers to the voting poll, rearrange the layout with the new state-of-the-art drag and drop layout editor, add, edit, delete and modify pages and tons of other cool stuff.
– Extensive manuals and inline help in the admin.

Requirements:

– Apache Web Server 1.3.x or higher
– PHP 4.3.11 or higher
– safe_mode off
– memory_limit 32MB or more
– No mySQL – all data is stored in flat files
– .htaccess
– ability to modify php.ini

Screenshots:

 

Download TinySiteXML 2.0 Lite

Visit the new website of TinySite.XML and view demo.