Do you speak my language: A is for AJAX, Apache, API, Array, alpha software

A is for AJAX, Apache, API, Array, and alpha software!

So, my top pick here is AJAX.

I like AJAX. I think it is great, and it has a technology that has dramatically changed the way I write webpages I use for teaching.

What is AJAX?

AJAX stands for 'Asynchronous Javascript and XML' (Javascript and XML will appear in later posts in this series). You don't really need to know what AJAX stands for, what you do need to know is that by using AJAX you can update just a section of a webpage so you don't need to reload the whole webpage. The chance are you have used webpages that contain AJAX and not even known it.

What this means for eLearning is you can dramatically improve the students experience of interacting with your teaching website as you can provide information if and when needed, and not force the student to reload the page.

AJAX in teaching

For over 10 years I have used a been using websites to teach. One thing I have always done is to have little tests associated with the web pages. These tests are usually just a series of simple multiple choice questions so the students can gauge how well they are doing and whether or not they understand something. However, there has always been one aspect of this use of tests that I have not liked, namely, the test had to be either in another window (so the student has to keep swapping windows), or the student had to reload the whole page when they answered the test (and of course this meant you couldn't really have more than one test per page). AJAX neatly solves this problem.

Using AJAX in a webpage

Ideally I would embed an AJAX test in this page, but due to how this blog works I can't. The following image shows an AJAX test embedded in a webpage.

In the image the white section is the test.

As the student completes the work on the page (the yellow part of the page in the above figure) they can answer the questions in the test (the white section). When the student wants the test marked they can click the submit button. This will cause their answers to be sent off and marked, feedback to be added, and the test section of the page refreshed with their answers and any feedback (see below). This means the student does not have the webpage continuously reloading and refreshing as they work. It also means that you can collect data on how well students are doing as all the right and wrong answers are sent back and can be collected at the server (see S later in the series).

You can see an example of a marked test in the following image.

Admittedly this could all be done with Javascript (see J) embedded in the webpage, and with no interaction with the backend (see B) server. However, that would mean you would be unable to collect data on class performance, plus all answers would have to be embedded in the webpage (not very good for summative assessment).

How does AJAX work?

Well, in the above example when the student clicks the submit button a request is sent to the server that contains all their answers. This request (information) is sent in such a way as to not cause the page to reload when the result is returned. This process is Asynchronous (the A in AJAX) as other sections of the webpage are still available, and in fact some section may be loading data using AJAX. This whole process is controlled by Javascript (the J in AJAX).

When the server receives the request it will package up a response in XML (see X in this series of posts, and this is also the X in AJAX) and send it back to the student.

The web browser being used by the student will receive this package of data and know that it is destined for display in one section (area) of the webpage. The browser will 'unwrap' the package and insert the information in the correct space on the page. The rest of the page will remain untouched.

This whole process appears to be seamless to the student, plus they can concentrate on their work and not spend their time flipping between webpages, and waiting for pages to load.

The others in the list of As:

Apache: This is a program that runs on webservers and delivers the web pages to the browsers. Apache is a very popular and free. The chances are you use it, but just don't know it.

API: This stands for 'Application Programming Interface'. An API is essentially a list of instructions that defines the commands you need to send to a software to get it to do what you want. An API will also state in what format the information/results will be returned.

Array: This is just a list of information packaged together for processing by a computer program.

Alpha software: Avoid it. This is software that had not been properly tested and is full of bugs (see B).

Protein Image: 3MMA

0 Comment