Ajax Hacks-Hack 10. 使用CSS文件产生格式化的信息
来源:互联网 发布:js object to json 编辑:程序博客网 时间:2024/05/18 21:08
让用户选择他们喜爱的消息格式。
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
此web页面的CSS格式源于文件Hacks.CSS。当用户从下拉选项中选择一个样式后,输入URL,按tab键或点击输入框以外的部分,按照用户选择的样式的响应信息将会显示出来。
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+""; }<<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- Ajax Hacks-Hack 10. 使用CSS文件产生格式化的信息
- AJAX Hacks之Hack 4. 接收XML格式的数据
- Ajax Hacks-Hack 5.取得普通字符串
- AJAX Hacks 之HACK3. 使用独立的文件来取得http request
- 浏览器的CSS Hacks
- 浏览器的CSS Hacks
- 对css hack的实践使用
- ajax中产生提示信息的类
- Ajax Hack 之hack 11 动态产生样式
- CSS Hack 使用总结
- CSS 忍者:安全的 CSS hacks 秘籍
- CSS hacks
- CSS Hacks
- 常用的CSS Hack
- IE8的css hack
- IE9的css hack
- IE9的css hack
- IE8的css hack
- Windows未公开函数揭密(3)
- Ajax Hack 之hack 12不刷新浏览器的情况下向服务器提交text或textarea的值
- 在VB6中用WINDOWS API函数读写INI文件
- Ajax Hack 之hack 11 动态产生样式
- 使用VB开发Windows环境下的串行通信程序
- Ajax Hacks-Hack 10. 使用CSS文件产生格式化的信息
- *** Web 存储系统窗体:窗体注册表 (new)***
- Ajax Hacks-hack9 深入了解HTTP Response
- 用VB实现屏幕阴暗操作
- Ajax Hacks-hack8 处理Request Object 的错误
- 在VB中实现窗体的动态效果
- Ajax Hacks-hack7接收JSON格式的数据
- 利用VB控制窗口显示风格
- Ajax Hacks-Hack6 接收数字数据