Ajax Hacks-Hack 10. 使用CSS文件产生格式化的信息

2022-07-15 80酷酷网 80kuku.com

　　ajax|cssAjax 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>

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

"; }<