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来实现页面的异步刷新,这里就不详细写出代码。 } } }

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-2017. All rights reserved.
TOP