We will ‘simulate’ a live server by creating static text resources (in different data formats), and storing them in the same project folder as the HTML, CSS, and JavaScript documents.

We’ll fetch data that’s in these formats:

HTML

JSON

XML

More about JSON and XML later.

.

Ajax works only with your web server

An important consideration for using the Ajax technique is that it works only with your web server.

At this point in time, you have – by design, and with intention – learned web client programming techniques by creating HTML, CSS, and JavaScript documents on your own computer. You do not need a server for these tasks. You can view and use your work with your computer’s browser apps.

However, to use Ajax, you must deploy your work to a web server.

All Seneca students have an account on the matrix host (matrix.senecac.on.ca). When you login, you will notice that your home directory (~) has a subdirectory named ‘public_html’. If you place your web programming work under that folder, it is publicly available at this URL:

You can deploy content to your matrix web site by using command-line utilities, or a graphical program like WinSCP for Windows, or FileZilla for OS X. (It’s likely that these apps are already on the classroom/lab room images.)

The other important consideration is that your requests can – by default – be targeted only to resources in your own domain. Why? Security. It is possible to get to resources outside your own domain, but you must first learn Ajax by working with resources in your own domain, before moving on to more advanced scenarios.

In general, XML uses programmer-defined element names to define the data. (There are several popular XML document formats that have been created over the years, which can ease the burden of designing a schema.

XML is similar to HTML in that there is a ‘root’ element, and descendant elements. A software object is defined using programmer-defined element names for each property, and the data is placed between the start and end tags. A collection of objects is defined by ‘nesting’ objects under (or, inside of) an element (just like li elements inside an ul in HTML).

Ajax 4 fetches HTML data, and displays some of it a popup div on top of the document.

Other use cases that we don’t have time to cover right now include auto-complete (because we need server-side programming support, beyond the coverage of this BTI220 course), and working with content from other domains (you’ll do that in the future).