Ajax Hacks-hack 10. Using CSS files to produce formatted information

Ajax|css Ajax hacks-hack 10. Using CSS files to produce formatted information

Let the user choose their favorite message format.

Hack sends a request to the server, and the server returns a text message. And the user's choice will determine the content and form of the information. The HTML code has a Drop-down selection that lets the user select a representation of the result.

Here is the HTML code:

"Http://www.w3.org/tr/1999/rec-html401–19991224/strict.dtd" >


function Setspan () {

document.getElementById ("InStr". Onmouseover=function () {

This.style.backgroundcolor= ' Yellow ';

document.getElementById ("InStr". Onmouseout=function () {

this.style.backgroundcolor= ' White ';

}

Find out the HTTP response headers when you ' get ' a Web page

Choose the style for your message

Javascript:void%200>

LoudFancyCosmopolitanPlain

Enter a URL:< form="">

The CSS format for this web page is derived from file HACKS.CSS. When the user selects a style from the Drop-down option, enter the URL, press the TAB key, or click outside the input box to display the response information in the user's chosen style.

Here is the file hacks.css:

div.header{Border:thin solid black; padding:10%;

Font-size:0.9em; Background-color:yellow; max-width:80%}

span.message {font-size:0.8em;}

div {max-width:80%}

. plain {Border:thin solid black; padding:10%;

font:arial, serif font-size:0.9em; Background-color:yellow; }

. Fancy {Border:thin solid black; padding:5%;

Font-family:herculanum, Verdana, serif;

Font-size:1.2em; TEXT-SHADOW:0.2EM 0.2EM Grey; Font-style:oblique;

Color:rgb (21,49,110); Background-color:rgb (234,197,49)}

. Loud {Border:thin solid black; padding:5%; font-family:impact, serif;

Font-size:1.4em; text-shadow:0 0 2.0em Black; Color:black;

Background-color:rgb (181,77,79)}

. cosmo {Border:thin solid black; padding:1%;

Font-family:papyrus, serif;

Font-size:0.9em; text-shadow:0 0 0.5em Black; Color:aqua;

Background-color:teal}

The style sheet defines several classes (plain, fancy, loud, and Cosmo).

The ajax-related JavaScript code can assign the predefined styles to page elements on user based. Therefore, the presentation tier of your Web application is separated from the application logic or domain tier.

The onblur event handler for the text field submits the URL value and the ' style name to a function named Getallheaders ():

Onblur= "Getallheaders (this.value,this.form._style.value)"

The reference This.form._style.value is JavaScript that represents the value of the option chosen from the select list (th e style name). The reference this.value is the text entered by the user in the text field.

This is the JavaScript code this page imports from Hacks8.js and the code that dynamically assigns the "style to" Displayed message highlighted:

var request;

var urlfragment= "http://localhost:8080/";

var St;

function Getallheaders (url,styl) {

if (URL) {

St=styl;

HttpRequest ("Get", url,true);

}

}

event handler for XMLHttpRequest function Handleresponse () {try{if (request.readystate = 4) {if (Request.status = 200) {/* All headers received as a single string */var headers = request.getallresponseheaders (); var div = Document.getelem Entbyid ("Msgdisplay"; div.classname= st = = ""?) Header ": St; Div.innerhtml= "

"+headers+"

"; } else {//request.status is 503 if the application isn ' t available;//500 if the application has a bug alert (request.status ); Alert ("A problem occurred with communicating between" + "the XMLHttpRequest object and the server program.";}} End outer if} catch (Err) {alert ("It does isn't appear that's the server is available for" + "this application. Please "+" try again very soon. \\nError: "+err.message);

}

}

/* Hacks #1, #2, and others for definitions of the HttpRequest ()

and Initreq () functions; Snipped here for the sake of brevity. */

Easy as Pie

The Getallheaders () function sets a top-level ST variable to the name of a CSS style class (plain, fancy, loud, or Cosmo) . The code then sets the ClassName property of the Div this holds the message in a shockingly simple way, which changes the Style assigned to the message:

if (request.status = * * All headers received as a single string/var headers = request.getallresponseheaders (); v Ar div = document.getElementById ("Msgdisplay"; div.classname= st = = ""?) Header ": St; Div.innerhtml= "

"+headers+"

"; }<