BTI220 notes – Tue Aug 6

We discuss the ‘Ajax’ programming technique today, and then (time permitting) the video, audio, and canvas elements.

.

This document is being edited (this notice will be removed after the edits have been completed).

.

Introduction to Ajax

For web client programmers, ‘Ajax’ is a programming technique that enables your JavaScript code to request new content for the document the user is interacting with.

Here are some introductory documents that will help you get started with Ajax:

Wikipedia – Ajax (programming)

MDN – AJAX info start page

MDN – Getting Started (with AJAX)

Ajax – A New Approach… (the article that popularized the Ajax technique)

.

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:

  1. HTML
  2. JSON
  3. 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:

http://matrix.senecac.on.ca/~username

Replace ‘username’ with your Seneca account’s user name.

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.

If you can’t wait, here are some documents to get you started:

Same origin policy (Wikipedia)

CORS, cross-origin resource sharing (Wikipedia)

.

Data formats – JSON and XML

When data is part of a request or response (in web programming), it obviously has a data format.

JSON and XML are plain-text data formats. They are somewhat human-readable.

.

JSON – JavaScript Object Notation

Its name says it all: This data format is the JavaScript object (and array) literal format.

There’s only one notable and obvious difference for beginners – the key name is surrounded by double-quotes.

Here’s an overview of JSON from Wikipedia.

Here’s the official web site for JSON, by Douglas Crockford.

.

XML – eXtensible Markup Language 

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).

Here’s an overview of XML from Wikipedia.

.

Programming code examples

There are four examples today. All are here:

http://matrix.senecac.on.ca/~peter.mcintyre/bti220/ajax/

All update the page using JavaScript. All are intended to cover typical use cases for web client programmers who are new to Ajax.

Ajax 1 fetches plain text – which happens to define an HTML table – and adds it to the document.

Ajax 2 fetches JSON data, and adds it to an existing HTML table in the document.

Ajax 3 fetches XML data, and adds it to an HTML div in the document.

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).

.

Some notes about the programming code examples

(more to come)

Ready states:

  • 0 – not initialized
  • 1 – server connection established
  • 2 – request received (by ?)
  • 3 – processing request (by ?)
  • 4 – finished, response is ready for us to do whatever with

.

Status codes:

  • 200 – OK
  • Other – oops (e.g. 404)

.

Video, audio, and canvas

(time permitting)

(handout)

.

.

.

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: