Ajax Hack 之hack 11 動態產生樣式

ajax|動態 Ajax Hack 之hack 11 動態產生樣式

為web內容動態定義和制定CSS樣式。

JavaScript和DOM編程允許使用者定義CSS樣式屬性，並應用於頁面元素。一個典型的例子是一個wiki頁面允許使用者設計自己頁面的方案和樣式。

通常情況下，比較好的方法是將樣式定義從JavaScript代碼中分離出來。這樣的習慣可以使元素獨立擴充，降低web頁面元素的複雜性，使之更高效。

本hack和上一個相似，根據使用者選擇的樣式，動態顯示伺服器資訊。和前一個不同之處就是：這裡是在代碼裡邊定義樣式，然後應用於html。代碼如下：

var request;

var urlFragment=“http://localhost:8080/”;

var st;

function getAllHeaders(url,styl){

if(url){

st=styl;

httpRequest(“GET”,url,true);

}

}

/* Set one or more CSS style attributes on a DOM element

CSS2Properties Object.

Parameters:

stType stands for a style name, as in ‘plain,‘‘fancy,‘‘loud,‘ or ‘cosmo‘.

stylObj is the HTML element‘s style property, as in div.style. */

function setStyle(stType,stylObj){

switch(stType){

case ‘plain‘ :

stylObj.maxWidth=“80%”;

stylObj.border=“thin solid black”;

stylObj.padding=“5%”;

stylObj.textShadow=“none”;

stylObj.fontFamily=“Arial, serif”;

stylObj.fontSize=“0.9em”;

stylObj.backgroundColor=“yellow”; break;

case ‘loud‘ :

stylObj.maxWidth=“80%”;

stylObj.border=“thin solid black”;

stylObj.padding=“5%”;

stylObj.fontFamily=“Impact, serif”;

stylObj.fontSize=“1.4em”;

stylObj.textShadow=“0 0 2.0em black”;

stylObj.backgroundColor=“rgb(181,77,79)”; break;

case ‘fancy‘ :

stylObj.maxWidth=“80%”;

stylObj.border=“thin solid black”;

stylObj.padding=“5%”;

stylObj.fontFamily=“Herculanum, Verdana, serif”;

stylObj.fontSize=“1.2em”;

stylObj.fontStyle=“oblique”;

stylObj.textShadow=“0.2em 0.2em grey”;

stylObj.color=“rgb(21,49,110)”;

stylObj.backgroundColor=“rgb(234,197,49)”; break;

case ‘cosmo‘ :

stylObj.maxWidth=“80%”;

stylObj.border=“thin solid black”;

stylObj.padding=“1%”;

stylObj.fontFamily=“Papyrus, serif”;

stylObj.fontSize=“0.9em”;

stylObj.textShadow=“0 0 0.5em black”;

stylObj.color=“aqua”;

stylObj.backgroundColor=“teal”; break;

default :

alert(‘default‘;

}

}

//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”; if(st){ setStyle(st,div.style); } else { setStyle(“plain”,div.style); } 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);

}

}

/* Initialize a request object that is already constructed */

function initReq(reqType,url,bool){

try{

/* Specify the function that will handle the HTTP response */

request.onreadystatechange=handleResponse;

request.open(reqType,url,bool);

request.send(null);

} catch (errv) {

alert(

“The application cannot contact the server at the moment. ”+

“Please try again in a few seconds.” );

}

}

/* Wrapper function for constructing a request object.

Parameters:

reqType: The HTTP request type such as GET or POST.

url: The URL of the server program.

asynch: Whether to send the request asynchronously or not. */

function httpRequest(reqType,url,asynch){

//Mozilla-based browsers

if(window.XMLHttpRequest){

request = new XMLHttpRequest( );

} else if (window.ActiveXObject){

request=new ActiveXObject(“Msxml2.XMLHTTP”;

if (! request){

request=new ActiveXObject(“Microsoft.XMLHTTP”;

}

}

//the request could still be null if neither ActiveXObject

//initialization succeeded

if(request){

initReq(reqType,url,asynch);

} else {

alert(“Your browser does not permit the use of all ”+

“of this application‘s features!”;

}

}

如果瀏覽器支援CSS樣式，每個頁面上的每個HTML元素都會有一個style屬性。例如，div元素有一個元素叫div.style允許JavaScript編寫者為此div設定內聯樣式屬性（如div.style.fontFamily="Arial"）。這就是setStyle函數的工作。兩個參數一個是樣式名稱，例如“Fancy”（從預選定義的list裡邊選擇），另一個是樣式所指定的div元素。函數設定了HTML div元素在頁面上的外觀。

顯示在頁面上的資訊（一串回應標頭資訊）來自伺服器的響應對象。如前一個hack一向，使用者輸入一個URL，然後點擊tab或者其他部分，最後顯示資訊。代碼如下：

“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: