Ajax Hacks-Hack 10. 使用CSS檔案產生格式化的資訊

ajax|css Ajax Hacks-Hack 10. 使用CSS檔案產生格式化的資訊

讓使用者選擇他們喜愛的訊息格式。

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‘;};

}

Find out the HTTP response headers when you "GET" a Web page

Choose the style for your message

javascript:void%200>

Loud Fancy Cosmopolitan Plain

Enter a URL:

此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+"

"; }<