English Japanese Kawa.netxp [ajax] JKL.ParseXML - XML Parsing Library for JavaScript

JKL.ParseXML is a JavaScript library that let you convert an XML into a JavaScript object (JSON).
DOM manipulation is not needed any more for you to write Ajax powered dynamic web applications.
The first version of this was shipped at May 18th, 2005.
For the several years, this has been used on many websites in Japan and other countries in the World.
See also SoftXML's nice article about JavaScript libraries including the JKL.ParseXML, thanks.
This is free under the BSD license.

Try also my another JS library of XML.ObjTree.

DOWNLOAD

Stable: jkl-parsexml-0.22.tar.gz TAR.GZ jkl-parsexml-0.22.zip ZIP (2007/01/04)
Trunk: http://svn.coderepos.org/share/lang/javascript/jkl/ SVN

USAGE

SAMPLE XML SOURCE: XML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<items>
  <item>
    <zip_cd>10036</zip_cd>
    <us_state>NY</us_state>
    <us_city>New York</us_city>
    <us_dist>Broadway</us_dist>
  </item>
</items>

SAMPLE SCRIPT:

<script type="text/javascript" src="jkl-parsexml.js"></script>
<script><!--
    var url = "zip-e.xml";
    var xml = new JKL.ParseXML( url );
    var data = xml.parse();
    document.write( data["items"]["item"]["us_state"] );
    document.write( data.items.item.us_state );
// --></script>

OUTPUT JSON:

{
  items: {
    item: {
      zip_cd: "1000001"
      us_state: "NY",
      us_city: "New York",
      us_dist: "Broadway",
    }
  }
};

SYNC/ASYNC, GET/POST

Click [DEMO] button to execute.

Sync-mode GET method

Simple usage. DEMO1

    var url = "zip-e.xml";
    var xml = new JKL.ParseXML( url );
    var data = xml.parse();
    alert( "us_state: "+data.items.item.us_state );

Sync-mode POST method

Specify the query string at second arguments of constructor. DEMO2

    var url = "http://www.kawa.net/works/ajax/zip/ajaxzip.cgi";
    var query = "zip=1000001";
    var xml = new JKL.ParseXML( url, query );
    var data = xml.parse();
    alert( "jcity: "+data.items.item.jcity );

* Japanese zip code database is used in this demo.

Async-mode GET method

Specify the call back function with async() method. DEMO3
You know, "ajax".

    var url = "zip-e.xml";
    var xml = new JKL.ParseXML( url );
    var func = function ( data ) {                  // define call back function
        alert( "us_dist: "+data.items.item.us_dist );
    }
    xml.async( func );
    xml.parse();

POST method is also available.

CHILD/CHILDREN, SCALAR/ARRAY

SAMPLE XML SOURCE: XML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<children>
  <girl>Hanako</girl>
  <boy>Taro</boy>
  <boy>Jiro</boy>
</children>

SAMPLE SCRIPT: (display second boy "Jiro")

<script type="text/javascript" src="jkl-parsexml.js"></script>
<script><!--
    var url = "children-e.xml";
    var xml = new JKL.ParseXML( url );
    var data = xml.parse();
    document.write( data["children"]["boy"][1] );   // hashed array
    document.write( data.children.boy[1] );         // propaties
// --></script>

OUTPUT JSON:

{
    children: {
        girl: "Hanako",
        boy:  [ "Taro", "Jiro" ]
    }
}

xml.setOutputArrayElements( "TAG" )

Specified elements into array, other elements into scalar.

var xml = new JKL.ParseXML( url );
xml.setOutputArrayElements( "boy" );            // only <boy>l into array
xml.setOutputArrayElements( ["boy"] );          // only <boy>l into array
xml.setOutputArrayElements( ["boy", "girl"] );  // only <boy>l and <girl>l into array
xml.setOutputArrayElements( [] );               // no elements into array
xml.setOutputArrayElements( "*" );              // all elements into array
xml.setOutputArrayElements( "boy", "girl" );    // error. second arguments would be ignored

xml.setOutputArrayNever()

All elements into scalar (first sibiling only)

{
    children: {
        girl: "Hanako",
        boy:  "Taro"
    }
}

xml.setOutputArrayAll()

All elements into array.

{
    children: [
        {
            girl: [ "Hanako" ],
            boy:  [ "Taro", "Jiro" ]
        }
    ]
}

xml.setOutputArrayAuto()

Default. Into scalar when the elements has only one child.
Into array when the elements has some children.

{
    children: {
        girl: "Hanako",
        boy:  [ "Taro", "Jiro" ]
    }
}

DEMO

1. Choose the XML source file to new JKL.Form() constructor.

XML SOURCE HERE

2. Choose the option for setOutputArray()



3. Execute parse() method

PARSED JSON HERE

SUB-CLASSES

JKL.ParseXML is abailable not only for XML file, but also for JSON, CSV, plain text file. JKL.ParseXML is now cross-browser HTTP library!

JKL.ParseXML.Text - for plain text file

Plain text file into scalar string. DEMO

    var url = "hello.txt";
    var http = new JKL.ParseXML.Text( url );
    var data = http.parse();
    alert( "content: "+data );                     // content: Hello, World!!

JKL.ParseXML.JSON - for JSON file

JSON text file into JavaScript object by eval.

    var url = "somedata.json";
    var http = new JKL.ParseXML.JSON( url );
    var data = http.parse();
    alert( "boy[1]: "+data.children.boy[1] ); 

JKL.ParseXML.CSV - for CSV file as array of array

CSV text file into array of array.

    var url = "table.csv";
    var http = new JKL.ParseXML.CSV( url );
    var data = http.parse();
    alert( "data[1][6]: "+data[1][6] );

The character encoding of CSV files must be defined at .htaccess file.

JKL.ParseXML.CSVmap - for CSV file with title line as array of map

The first line of CSV file is treated as the title of columns. Each line of the rest are mapped (hashed) by using the title of columns. DEMO

    var url = "table.csv";
    var http = new JKL.ParseXML.CSVmap( url );
    var data = http.parse();
    alert( "data[0].name: "+data[0].name );

data[0].name is same as data[0]["name"].

JKL.ParseXML.LoadVars - for application/x-www-form-urlencoded encoded file

The sub-class's target is application/x-www-form-urlencoded encoded text file used for LoadVars class and loadVariables function of ActionScript, Macromedia Flash.

    var url = "sample.vars";
    var http = new JKL.ParseXML.LoadVars( url );
    var data = http.parse();
    alert( "data.familyname: "+data.familyname );

A sample of application/x-www-form-urlencoded encoded file:

familyname=Kawasaki&lastname=Yusuke&gender=male&age=28

You have to escape some special charactors: "%3D" for """, "%26" for "&".

This class is very usefull for already existing Web services targeted for ActionScript.

JKL.ParseXML.DOM - for DOM operation of XML file

DOM sub-class is not convert XML file into JavaScript object but returns DOM (documentElement).

    var url = "zip.xml";
    var http = new JKL.ParseXML.DOM( url );
    var dom = http.parse();
    alert( "documentElement.nodeName: "+dom.nodeName );      

Comments by AjaxCom

Links

Kawa.netxp © Copyright 2005-2010 Yusuke Kawasaki