当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > 开始研究Ajax. 第一天

AJAX技术
AJAX 用户注册时的应用实例
ajax readyState的五种状态详解
php AJAX POST的使用实例代码
Ajax 用户名验证是否存在
Ajax+PHP简单基础入门实例教程
AJAX 异步传输数据的问题
ASP AJAX 静态分页
js装载xml文件然后发向服务器的实现代码
完成了AJAX树附原理分析
AJAX 支持搜索引擎问题分析
ajax Suggest类似google的搜索提示效果
Ajax 框架学习笔记
用ajax xml的数据读取的HelloWorld程序
Ajax 表单验证 实现代码
Ajax request response 乱码解决方法
AJAX 随记
ajax 乱码的一种解决方法
ajax session过期问题的几个解决方案
四步学会 Ajax
Ajax异步(请求)提交类 支持跨域

AJAX技术 中的 开始研究Ajax. 第一天


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 50 ::
收藏到网摘: n/a

开始研究Ajax. 第一天
首先,我是一个不适合学习程序的人,也不喜欢,因为我非常马虎,每次都会写错很多代码。不过出于对DOM,JS,CSS热爱,还是开始研究Ajax了。
什么是Ajax?
我答:首先Ajax的四个组成部分为[XMLHttpRequest],[Javascript],[DOM],[CSS].这四个东西暂且不多解释。这四个东西的作用是 [XMLHttpRequest]负责与Web服务器通信,[Javascript]通过控制[DOM]来控制页面,[CSS]做页面修饰,当然也是被控制的对像。这就是Ajax。我所理解的。
下面是一个实例!
Ajax的Hello页! Hello The World!
<html>
<head>
<title>Hello.the World</title>
<style type="text/css"><!--
.declared { color:red; font-size:14px; }
.programmed { color:blue; font-size:12px; font-weight:bold;}
--></style>
<script>
window.onload=function() {
var hello=document.getElementById('hello'); //通过ID找到元素
hello.className='declared';
var empty=document.getElementById('empty');
addNode(empty,"reader of");
addNode(empty,"Ajax in Action!");
var children=empty.childNodes;
for (var i=0;i<children.length;i++) {
children[i].className='programmed';
}
empty.style.border='solid green 2px'; //直接为节点设置样式
empty.style.width="200px";
}
function addNode(el,text){
var childEl=document.createElement("div"); //创建新元素
el.appendChild(childEl);
var txtNode=document.createTextNode(text); //创建文本元素
childEl.appendChild(txtNode);
}
</script>
</head>
<body>
<p id="hello">Hello</p>
<div id="empty"></div>
</body>
</html>
这个例子就是通过Javascript控制DOM,在页里面写内容还有就是对页面内容用CSS修饰。