Overview of data types

There are two categories of data types in XML Schemas:
- simple types -- which are restricted to strings and cannot have attributes or nested elements
- complex types -- which can have attributes and can include other data types as elements.
There are 44 different types in XML schemas, 19 of which are primitive and the remainder are derived.
Example primitive types include: string, Boolean, time and anyURI.
Example predefined derived types include: byte, long, decimal, unsignedInt, positiveInteger, and NMTOKEN.
User defined types are defined by specifying restrictions on an existing type (called a base type). For example, for integer there are eight so-called "facets" on which restrictions to base types can be made: totalDigits, maxInclusive, maxExclusive, minInclusive, minExclusive, pattern, enumeration, and whitespace.
Types can be named or anonymous. Anonymous types cannot be used outside of the element in which it was declared
Elements in DTDs are all global. For schemas one can have local elements. These are elements which defined within the scope of some child of the schema tag. child elements themselves are global.

Simple Types

In an instance of the plane schema we could then have:

<engine>an example of the content of an engine</engine>

You can also give default values or force fixed values with slight variations of this declaration:

<xsd:element name="engine" type="xsd:string" default="V-6" />
<xsd:element name="plane" type="xsd:string" fixed="single wing" />

A simple user-derived type can be defined using the <restriction> tag:

<xsd:simpleType name="firstName">
	<xsd:restriction base="xsd:string">
         <xsd:maxLength value="10" />
     </xsd:restriction>
</ xsd:simpleType>

Complex Types

There are several kinds of complex types that can be used with XML schemas.
We will only look at the complex types which are restricted to having subelement-only -- not both subelements and text. The complexContent tag can be used to handle other kinds of content.

To define what subelement occur for an element we can use either sequence or all. sequence -- forces an order on the subelement, all doesn't.

<xsd:complexType name="car">
	<xsd:sequence>
          <xsd:element name="make"  type="xsd:string" />
          <xsd:element name="year" type="xsd:decimal" />
     </xsd:sequence>
<!-- you can use minOccurs, maxOccurs to specify number of occurrences ;
you can have more than one sequence, all tag here-->
</ xsd:complexType>

References

You can define element to be used as a subelement outside of another element and use a reference to refer to it:

<xsd:element name="year">
<xsd:simpleType >
     <xsd:restriction base="xsd:decimal">
         <xsd:minInclusive value="1900" />
         <xsd:maxInclusive value="2018" />
     </xsd:restriction>
</ xsd:simpleType>
      </xsd:element>
<xsd:complexType name="car">
	<xsd:sequence>
             <xsd:element name="make"  type="xsd:string" />
              <xsd:element ref="year" />
         </xsd:sequence>
</ xsd:complexType>
<xsd:element name="sport_car" type="car">
 <xsd:attribute name="color" type="xsd:string" />
</xsd:element>

Indicating the Schema Used By an XML document

Here is an example of how to say an XML patient document makes use tags defined in a patient schema:

<?xml version="1.0" ?>
<patient xmlns="http://somewhere.com"
                 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                 schemaLocation="http://somewhere.com  patient.xsd" >

<!-- other tags for this particular patient record -->

</patient>

Quiz

Which of the following statements is true?

The regular expression pattern /\d+og/ would match the string: dddog
If we had an HTML button tag with id my-button, we could in Javascript add the function clickMe to handle click events using the syntax:
```
document.getElementById("my-button"
    ).addEventListener("click", clickMe, false);
```
In a DTD the <!ENTITY ...> declaration is used to define new tags.

XML and CSS

Most modern browsers are completely happy to style any tag provided there is some style-sheet information given for it:
```
plane {display:block; border 3px;}
```
To associate a stylesheet with an XML document we use the syntax:
```
<?xml-stylesheet type="text/css" href="mystyles.css" ?>
```

XSLT

Sometimes it is useful to transform one XML markup language into some other XML language.
For instance, suppose you want to display a pure RSS feed nicely and you want the links to work in IE. Since IE does not support the XLink language this is hard unless you do a stylesheet tranformation.
The basic idea of XSLT (eXtensible stylesheet transformations), is that we can associate a stylesheet transformation with an XML document and apply this transformation using a processor (for instance, a browser), to get some other XML language.

XSLT Example -- Initial XML Document

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="xslplane.xsl" ?>
<plane>
    <year>1970</year>
</plane>

XSLT Example -- The Transformation

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0"
    xmlns:xsl= "http://www.w3.org/1999/XSL/Transform"
   xmlns = "http://www.w3.org/1999/xhtml"
>
<xsl:template match="plane">
<html><head>
<title>result of applying a stylesheet to plane</title>
</head><body><h1>Plane Description</h1>
     <xsl:apply-templates />
     </body></html>
 </xsl:template>
<xsl:template match="year">
    <p style="color:red">
    <xsl:value-of select="." />
    </p>
</xsl:template>
</xsl:stylesheet>

POSH -- Plain Old Semantic HTML

Using XML languages for semantic meaning is popular on the server-side.
It is moderately popular on the client with examples like smil, svg, and rss, but has never quite taken the world by storm.
An alternative approach to create a whole new language if to embed semantic information into plain old html.
For instance, if one wants to say a div tag represents a first name one could give it the attribute class="first-name".
This has the virtue of being a more lightweight approach which seems especially reasonable if you would instead be using XSLT to transform the document to HTML anyway.
Some micro-formats such as vcard have a standard way to be written using POSH.
POSH has the drawback that it is harder to validate the semantic information because you can't use common tools like a XML parser.

Beginning AJAX

AJAX stands for Asynchronous Javascript and XML.
Asynchronous means that one does not need to wait for the response to an HTTP request to do something one can use Javascript to have several outstanding HTTP requests and still make things happen in the browser.
Further one doesn't have to reload the entire page when the results of a request are returned.
The XML in AJAX is because the results of a request are usually XML, JSON, or YAML data which is then formatted by some Javascript code.
The basic key to AJAX is the ability for Javascript to make an HTTP request. This is done with the XMLHttpRequest object.
As an example, look at the Javascript in the file:
http://www.cs.sjsu.edu/faculty/pollett/test/dept3.html

Step-by-Step

To create an XMLHttpRequest one could simply write in Javascript:
```
request = new XMLHttpRequest();
```
If we need to set up HTTP request headers we can use:
```
request.setRequestHeader("name", "value");
```

Step-by-Step Continued I

To open a connection back to the server the Javascript came from one can then do:

request.open(theHTTPmethod, theURL, theAsync flag)
or
request.open(theHTTPmethod, theURL, theAsync flag, username, password)

For example,

request.open("GET", "progress.php", true)

The asynchronous flag says whether or not the Javascript can continue executing (true) or if it must wait for a response (false).
At this point no data has been sent yet.

Step-by-Step Continued II

We next need to set up a callback function which will be called as we get data back from the server:

var self = this; /* remember scope of enclosing 
                            object */
request.onreadystatechange = function()
{
	switch(request.readyState)
    {
        case 0:// handle uninitialized case
        case 1: // handle open but no send case
        case 2: // handle send but no response case
        case 3: // handle response is being downloaded case
        case 4: // handle response has completed being downloaded case 
    }
}

Step-by-Step Continued III

In case 3 or 4 above, request.responseText or request.responseXML will contain the data that has been returned by the server
In case 3 or 4 above, request.getAllResponseHeaders() can be used to get the HTTP response headers.
Sometimes it is useful to start a timer in case 3, using setTimout. If the request is taking to long so that the timer gets called, one can then abort the request using: request.abort.

Typically, the code in 3 or 4 above would put the response text into some tag in our document. This could be done with:

document.getElementById("myDivTag").innerHTML =  request.responseText; 
//or we could do...
myDiv = document.getElementById("myDivTag")
if(myDiv.firstChild)
{
	myDiv.removeChild(myDiv.firstChild);
}
myDiv.appendChild(document.createTextNode(request.responseText));

Step-by-Step Continued IV

Once we have set up our callback function we are ready to send data to the server.
To do this we can do:
```
request.send(null);
```
Note: send's argument can be used if using POST method to send the posted data
That's it! We just sit back then and wait for our callback to be called.

XML Schemas, XSLT, Start AJAX

Outline