开始研究Ajax. 第一天

开始研究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修饰。