ajax入门学习

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/

阅读了以上链接中的一系列文章，对Ajax有了初步的认识。以下是我的一点体会，比较凌乱，有待整理。

首先，浏览器从服务器拿到的是包含了各种标签的一段代码，它会对其进行解析，并转化为一颗“树”。也就是说，有的部分会直接显示出来，而很多部分是作为具备特殊含义的标签来解析的，从而控制格式、样式、动作、事件等。而整个页面会被转化为document对象，也就是文档节点。

与文档节点类似，还有元素节点（a、p、div等），属性节点（style等），文本节点（具体内容）。这些节点构成了整棵树。可以在其父子、兄弟节点之间遍历，获取某个特定节点，并进行增、删、修改等操作。

于是，对页面的操作就变成了对树的操作！下面是一段简单的示例，被注释掉的是复杂的方法，而使用的是相应替代的简单方法。

   

       

           

           

            <script language=javascript type=text/javascript>

                function changeImage(){

    //               var new_img = document.createElement('img');

    //               new_img.setAttribute('src', 'image/rabbit-hat.gif');

    //

    //               var old_img = document.getElementById('tophat');

    //               var img_parent = old_img.parentNode;

    //               //img_parent.insertBefore(new_img, old_img);

    //               //img_parent.removeChild(old_img);

    //               img_parent.replaceChild(new_img, old_img);

   

                    document.getElementById('tophat').setAttribute("src", "image/rabbit-hat.gif");

                    document.getElementById('hocus').setAttribute("value", "Get back in that hat!");    

                    document.getElementById('hocus').onclick = hideImage;

                }

   

                function hideImage(){

                    document.getElementById('tophat').setAttribute("src", "image/topHat.gif");

                    document.getElementById("hocus").setAttribute("value", "Hocus Pocus!");

                    document.getElementById('hocus').onclick = changeImage;

                }                                              

            </script>

       

       

           

Welcome to the DOM Magic Shop!