讓用戶選擇他們喜愛的消息格式。
hack向服務器發送一個請求，服務器返回一個文本信息。而用戶的選擇將決定信息的內容和表現形式。Html代碼有一個下拉選擇，讓用戶選擇結果的表示形式。
下面是Html代碼：
“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‘;};
}
此web頁面的CSS格式源於文件hacks.CSS。當用戶從下拉選項中選擇一個樣式後，輸入URL，按tab鍵或點擊輸入框以外的部分，按照用戶選擇的樣式的響應信息將會顯示出來。
以下是文件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}
樣式表定義了幾個類（plain, fancy, loud, and cosmo）。
The AJax-related JavaScript code can assign the predefined styles to page elements based on user choices. 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 (the style name). The reference this.value is the text entered by the user in the text fIEld.
Here is the JavaScript code that the page imports from hacks8.JS, with the code that dynamically assigns the style to the 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.getElementById(“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 not appear that the server is available for ”+ “this application. Please”+ “ try again very soon. \\nError: ”+err.message);
}
}
/* See 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 that holds the message in a shockingly simple way, which changes the style assigned to the message:
if(request.status == 200){ /* All headers received as a single string */ var headers = request.getAllResponseHeaders( ); var div = document.getElementById(“msgDisplay”; div.className= st == ““ ? “header” : st; div.innerHtml=”
"+headers+""; }