CS计算机代考程序代写 scheme javascript Java flex jquery asp.net algorithm Hive © 2007-2021 Marco Papa & Ellis Horowitz 1

Ajax
Asynchronous JavaScript + XML

Mark Andreessen, Netscape, 1995: “MS Windows will be reduced to
a poorly debugged set of device drivers running under Netscape
Navigator, with desktop-style applications running inside the browser”.
This did not happen until 10 years later (true/false?)

Asynchronous JavaScript + XML

• Ajax isn’t a technology.

• It’s really several technologies. Ajax incorporates:

– standards-based presentation using XHTML;
– CSS, dynamically manipulated using JavaScript;
– dynamic display and interaction using the Document

Object Model (DOM). Web page exposed as DOM object;
– data interchange using XML (nowadays JSON);
– asynchronous data retrieval using XMLHttpRequest, a

JavaScript object, a.k.a “Web remoting”;

– JavaScript binding everything together;
– Server no longer performs display logic, only

business logic.

• Acronym originated by Jesse James Garrett in 2005:
https://immagic.com/eLibrary/ARCHIVES/GENERAL/ADTVPATH
/A050218G.pdf

Some History and Browsers Supporting Ajax

• The XMLHttpRequest object (XHR) is the main element of Ajax
programming.

• Microsoft first implemented the XMLHttpRequest object in
Internet Explorer 5 (IE5) for Windows as an ActiveX object
in March 1999, making it the first Ajax-enabled browser.

• Similar functionality is covered in a recommended W3C
standard, Document Object Model (DOM) Level 3 Load and Save
Specification (April 2004):

http://www.w3.org/TR/DOM-Level-3-LS

• Engineers on the Mozilla project implemented a compatible
native version for Mozilla 1.0 (included in Netscape 7,
Firefox 1.0 and later releases). Apple has done the same
starting with Safari 1.2.

• Other browsers supporting XMLHttpRequest include:

– Opera 7.6+, Apple Safari 1.2+, all mobile browsers

• XMLHttpRequest moved to W3C in 2006 and back to WHATWG in
2012 as XMLHttpRequest Living Standard:
– https://xhr.spec.whatwg.org/

An Example Using Ajax – Google Maps

Initial screen zoom 3 times drag map and zoom

See: https://maps.google.com
Notice that the page is never explicitly refreshed. View source and search
for XMLHttpRequest; you will find multiple occurrences. (found 2 times on
maps.google.com)

Mashup Example –
www.zillow.com

A combination of satellite
photos with records of home
sale prices placed on top of
the appropriate houses

Found 4+ references of
XMLHttpRequest

A “mash-up” is a web application that consumes (“remixes”)
content from different sources and aggregates them to create a new application

A Mash-Up Combines Multiple Sources of Data

Characteristics of Ajax Applications

• They are applications (or Apps), not just web
sites

• They allow for smooth, continuous interaction

• “Live” content

• Visual Effects

• Animations, dynamic icons

• Single keystrokes can lead to server calls
• New Widgets (selectors, buttons, tabs, lists)

• New Styles of Interaction (drag-and-drop,
keyboard shortcuts, double-click)

Comparing Traditional vs. AJAX Websites

Traditional
• Interface construction is

mainly the responsibility
of the server

• User interaction is via
form submissions

• An entire page is required
for each interaction
(bandwidth)

• Application is unavailable
while an interaction is
processing (application
speed)

Ajax
• Interface is manipulated

by client-side JavaScript
manipulations of the
Document Object Model
(DOM)

• User interaction via HTTP
requests occur ‘behind the
scenes’

• Communication can be
restricted to data only

• Application is always
responsive

How to Recognize an Ajax Application
Internally

“View Source” in the browser and search for:
• Javascript code that invokes:

– XMLHttpRequest or

• JavaScript that “loads” other JavaScript code
(files with .js extension)

• XML code passed as text strings to a server,
such as ‘…’

• Javascript

Request a
text file

Request an XML file

The javascript file does all of the work

Imported JavaScript-script01.js
window.onload = initAll;
var xhr = false;
function initAll() {

document.getElementById("makeTextRequest").onclick = getNewFile;

document.getElementById("makeXMLRequest").onclick = getNewFile;}
function getNewFile() {

makeRequest(this.href); return false;}

function makeRequest(url) {
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();}
else { if (window.ActiveXObject) {

try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

catch (e) { }
} }

if (xhr) { xhr.onreadystatechange = showContents;

xhr.open("GET", url, true); xhr.send(null); }
else { document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't
create an XMLHttpRequest"; } }

function showContents() {

if (xhr.readyState == 4) {
if (xhr.status == 200) {

var outMsg = (xhr.responseXML &&
xhr.responseXML.contentType=="text/xml") ?
xhr.responseXML.getElementsByTagName("choices")[0].textContent : xhr.responseText;
} else { var outMsg = "There was a problem with the request " + xhr.status; }

document.getElementById("updateArea").innerHTML = outMsg; } }

On page load the onclick event is set to call the function
When the click is made, getNewFile and makerequest are executed.

showContents waits for a successful return of an
file; it then prints the result in the browser

Browser Output

Result of clicking on the
first link

Result of clicking on the
second link

http://csci571.com/ajaxexamples/simple/script01.html

Second Ajax Example – Using Ajax to Download Files from Flickr

• Here is the html file, which basically loads script02.js

Second Ajax Script

• Here is script02.js
window.onload = initAll;

var xhr = false;
function initAll() {

if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
else { if (window.ActiveXObject) {

try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } }
if (xhr) { xhr.onreadystatechange = showPictures;

xhr.open("GET", "flickrfeed.xml", true); xhr.send(null); }

else { alert("Sorry, but I couldn't create an XMLHttpRequest"); } }
function showPictures() {

var tempDiv = document.createElement("div");
var pageDiv = document.getElementById("pictureBar");

if (xhr.readyState == 4) {
if (xhr.status == 200) {

tempDiv.innerHTML = xhr.responseText;
var allLinks = tempDiv.getElementsByTagName("a");

for (var i=1; i

Dori Simth’s Photos

tag:flickr.com,2005:/photos/public/116078
http://static.flickr.com/5/buddyicons/ ?1113973282

A feed of Dori Smith’s Photos
2006-03-22T20:12:44Z
Flickr

Mash note

OTHER STUFF

Each node has two links;
This application uses the second link so
the showPictures loop starts with 1 rather
than 0 and increments by 2; each link contains
the thumbnail image inside it; every
thumbnail is a link back to the original photo

Browser Output

http://csci571.com/ajaxexamples/simple/script02.html

Third Ajax Example - Refreshing Server Data
• This extension retrieves a new version of the data from the server,

refreshing the page; here is the html accessing javascript

My Third Ajax Script

• And here is the source for script03.js
window.onload = initAll;

var xhr = false;
function initAll() { same as previously except it calls getPix }
function getPix() { xhr.open("GET", "flickrfeed.xml", true);

xhr.onreadystatechange = showPictures; xhr.send(null);setTimeout("getPix()",5 * 1000); }
function showPictures() {

var tempDiv = document.createElement("div");
var tempDiv2 = document.createElement("div");

if (xhr.readyState == 4) {
if (xhr.status == 200) {
tempDiv.innerHTML = xhr.responseText;

var allLinks = tempDiv.getElementsByTagName("a");
for (var i=1; i

My Fourth Ajax Script

A Gentle Introduction to JavaScript

http://csci571.com/ajaxexamples/simple/script04.html

The stylesheet

#previewWin {

background-color: #FF9;

width: 400px;
height: 100px;
font: .8em arial, helvetica, sans-serif;

padding: 5px;
position: absolute;
visibility: hidden;

top: 10px;
left: 10px;

border: 1px #CC0 solid;
clip: auto;
overflow: hidden;

}

#previewWin h1, #previewWin h2 {

font-size: 1.0em;
}

The javascript source
window.onload = initAll;
var xhr = false;
var xPos, yPos;
function initAll() {

My Fifth Ajax Script

Initial screen

Autocomplete attribute is set to off to prevent browsers
from trying to autocomplete the field

The stylesheet

body, #searchfield {

font: 1.2em arial, helvetica, sans-serif;

}
.suggestions {

background-color: #FFF;

padding: 2px 6px;
border: 1px solid #000;

}

.suggestions:hover {
background-color: #69F;

}
#popups {

position: absolute;

}

#searchField.error {
background-color: #FFC;

}

The JavaScript Source

window.onload = initAll;
var xhr = false; var statesArray = new Array();
function initAll() {

document.getElementById("searchField").onkeyup = searchSuggest;

if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
else { if (window.ActiveXObject) {

try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } }}

if (xhr) {
xhr.onreadystatechange = setStatesArray;
xhr.open("GET", "us-states.xml", true); xhr.send(null);

} else { alert("Sorry, but I couldn't create an XMLHttpRequest"); }}

function setStatesArray() {
if (xhr.readyState == 4) {

if (xhr.status == 200) {

if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");

for (var i=0; i

A Gentle Introduction to JavaScript

Related Posts