Ajax

Question 1

What does AJAX stand for?

Answer 1

Asynchronous JavaScript and XML

Question 2

Why Web Apps?

Answer 2

Everyone has a browser

Automatic updates when accessed in browser

Question 3

Downside of Web Apps

Answer 3

GUI is poor. HTML is OK for static documents but rubbish for programs
HTTP is a poor protocol for communication

Question 4

Why AJAX?

Answer 4

Instant updates
Asynchronous results
More widgets than GUI elements

Question 5

What is the basic ajax process?

Answer 5

JAVASCRIPT:

1. Define a Request Object
2. Initiate Request (with GET/ POST)
3. Handle Response

HTML

1. Load JavaScript
2. Designate control that initiates request
3. Give IDs to input elements, and to output region.

Question 6

Ajax Process:
JavaScript:
Code for 1. Define a Request Object

Answer 6

function getRequestObject(){
if(window.XMLHttpRequest){
return (new XMLHttpRequest());
}else
}return(null);
}

Question 7

Ajax Process:
JavaScript
Code for 2. Initiating a request

Answer 7

function initiateRequest(resultsRegion){
var req = getRequestObject();
req.onreadystatechange =
function() {handleResponse(req, resultsRegion)};
req.open("GET", "myFile.html", true);
req.send(null);
}
}

Question 8

Ajax Process:
JavaScript:
Code for 3. Handle Response

Answer 8

function handleResponse(req, resultsRegion){
if(req.readyState == 4) && (req.Status == 200){
htmlInsert(resultsRegion, req.responseText);
}
}

Question 9

True or false; JavaScript lets you pass functions around?

Answer 9

True

As in Ajax Process, JS, (2) Initiating a Request: reques.onreadystatechange = handleResponse;

Question 10

Describe JavaScript first class functions

Answer 10

JS lets you pass around functions, ie access them in another function:

request.onreadystatechange = handleResponse;

The code from the Initiate Request (2) function has a onreadystatechange that equals another function; the handleResponse (3) function.

JavaScript allows anonymous functions

var request = getRequestObject();

request.onreadystatechange = function() {handleResponse(request)}

By calling and putting the handleResponse function within a function(){handleReponse(request)}; you make the function anonymous rather than just goin request.ORSC = handleResponse;

Question 11

Technologies needed in place to use Ajax?

Answer 11

Sever-side language such as JSP, .NET or PHP.
JavaScript
Web Browser
Servlets
Server, tomcat?

Question 12

What is the correct way to use anonymous functions?

Answer 12

Use an anonymous function with a local copy of the request object embedded in the code ie for the 2. Initiate Request part of of the Ajax process:

function sendRequest(){
    request = getRequestObject();
    request.onreadystatechange = function() {handleResponse(request); };
}

Question 13

What are the design deficiencies with using HTML to acheive Ajax (entProg/wk3)

Answer 13

Content is same on each request (HTML page doesnt change dynamically)

A better way to do this is with a JSP page.

HMTL page url is hardcoded into ajax-utils.js - instead make a generic function (address) then pass the page in from the HTML, so it can be used again with out areas.

Question 14

Design deficiencies with using JSP pages to achieve Ajax (entProg/wk3)

Answer 14

The URL stays the same even when the output changes

If the browser caches the page, it returns wrong time for example - SolutionL cache-control and pragma headers

JSP is wrong tech if using Java - JSP is best for lots of HTML and little but no logic/java - Solution: use Servlet.

Question 15

Design deficiencies with Servlet way of achieving Ajax (entProg/wk3)

Answer 15

Alerts are usually reserved for warnings, users prefer results in a page
Solution: use dynamic HTML to update page

Question 16

Name 3 styles of Ajax

Answer 16

Content-centric Ajax: Server sends exact HTML to be displayed. Client simply inserts content into these tables. Not good if the server is going to be used for different things. May only want to send data:

Data-centric Ajax:
The server sends raw data
The client parses the data and builds HTML

Script-centric Ajax:
Server sends JavaScript functions
Client executes functions
Inflexible - requires server to know too much about client

Question 17

What advantage does Ajax have over standard client server apps using HTML/HTTP

Answer 17

Communicate with server without leaving the page
Frequent small updates - faster
Data is kept on screen - no refresh
Ajax allows more like desktop apps

Question 18

Advantages and disadvantages of XML

Answer 18

Advantages - Human readable, structured metadata

Disadvantages - Verbose, larger to procress

Question 19

Advantages and disadvantages of JSON

Answer 19

Advantages - lightweight (serialisation), more efficient than XML, mapped straight to objects.

Disadvantages - not easily read by humans. No error handling. Security issues with data transfer

Question 20

Advantages and disadvantages of plain text

Answer 20

Advantage: extremely lightweight, simple to process
Disadvantage: only basic data, no standard way to represent binary data, problems to SQL

Question 21

Ajax Process:
JavaScript:
Code for 3. htmlInsert

Answer 21

function htmlInsert(id, htmlData){
document.getElementById(id).innerHTML = htmlData;
}

Question 22

HTML code for ajax

Answer 22

<div></div>