Blog

CSS 在 Ajax 中的应用

CSS 是用来统一页面布局的,如果网站有一百多个页面,那么就可以通过修改一个样式表文件来改变所有页面的样式,这是符合一个设计多次使用的软件工程原则。

Web 2.0时代给人的是焕然一新的设计界面和内容布局,由于CSS 是统一的标准,几乎所有的Web开发工具都支持CSS. 虽然在Ajax的定义中并没有看到CSS 的名字,但开发一个美观的Web程序,却是离不开CSS的支持。

CSS 在Ajax的作用是开发统一的界面布局,并能随时修改部分元素的样式。由于Ajax提供了局部刷新的功能,所以使用CSS 可以实现局部元素更新样式,而不影响到整个页面,

这里介绍两种:

1. 一种主要是使用到Ajax中的DOM和Javascript技术来实现Ajax动态改变局部元素样式。由于没有与服务端的数据交互,所以并不实用XMLHttpRequest技术。

例如:
<input type=”button” value=”改变样式” onclick=”changestyle();” />
<div class=”input” id=”txt”>我变!</div>
<script type=”text/javascript”>
function changestyle()
{
//获取页面元素
var dom=document.getElementById(“txt”);
//改变样式
dom.style.fontSize=”14″;
dom.style.color=”red”;
dom.style.textDecoration=”overline”;
}
</script>

点击按钮后,就可以看到 “我变” 发生了变化。
2. 使用Ajax异步获取数据来达到改变样式。
例如:创建异步获取对象
var xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
funtion getData()
{
//状态发生变化是关联的方法
xmlhttp.onreadystatechange=statechange;
//异步加载服务器端数据
xmlhttp.open(“GET”,”DataPage.php”,true);
xmlhttp.send(null);
}
function statechange()
{
if(xmlhttp.readystate==4)
{
if(xmlhttp.status==200)
{
//异步获取已经完成,并且是成功状态时,显示获取的数据
SplitData(xmlhttp.responseText);
}

function SplitData()
{
// 这个函数是用来处理从Ajax获取的异步数据,并通过DOM来实现页面的异步刷新,这里就不详细写出代码。
}
}
}

facebooktwittergoogle_pluslinkedinmail

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2018. All rights reserved.
TOP