ajax css文件,Ajax使用CSS文件产生格式化的信息.doc

Ajax使用CSS文件产生格式化的信息

让用户选择他们喜爱的消息格式。

hack向服务器发送一个请求，服务器返回一个文本信息。而用户的选择将决定信息的内容和表现形式。HTML代码有一个下拉选择，让用户选择结果的表示形式。

下面是HTML代码：

“/TR/1999/REC-html401strict.dtd”>function setSpan( ){document.getElementById(“instr”.οnmοuseοver=function( ){this.style.backgroundColor=‘yellow‘;};document.getElementById(“instr”.οnmοuseοut=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: “getAllHeaders(this.value,this.form._style.value)”> “instr“ class=“message”>?press tab or click outside the field when finished editing?

函数setSpan的目的是将("press tab or click outside the field when finished editing")的格式设置为，当鼠标移动到上方是文本背景变为黄色，当鼠标移开时，恢复为白色。

窗体底端

此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