【读书笔记】Javascript DOM编程艺术（七）动态创建标记

7.1 一些传统方法

    7.1.1 document.write

    7.1.2 innerHTML属性

        （1）innerHTML属性可以用来读、写某给定元素里的HTML内容。

        （2）在任何时候，标准的DOM都可以用来代替innerHTML。

7.2 DOM方法

        （1）DOM是文档的表示。DOM所包含的信息与文档里的信息一一对应。

        （2）在浏览器看来，DOM节点树才是文档。

        （3）在DOM看来，一个文档就是一棵节点树。如果你想在节点树上添加内容，就必须插入新的节点；如果你想添加一些标记到文档，就必须插入元素节点。

    7.2.1 createElement方法

        （1）创建一个新的元素：

                document.createElement(nodeName)

    7.2.2 appendChild方法

        （1）把新创建的节点插入某个文档的节点树的最简单的办法是，让它成为这个文档某个现有节点的一个子节点：

                parent.appendChild(child)

    7.2.3 createTextNode方法

        （1）createElement方法只能创建元素节点；你需要创建一个文本节点，你可以用createTextNode方法来实现它：

                document.createTextNode(text)

    7.2.4 一个更复杂的组合

7.3 重回图片库

    7.3.1 在已有元素前插入一个新元素

        （1）DOM提供了名为insertBefore()方法，这个方法将把一个新元素插入到一个现有元素的前面：

                parentElement.insertBefore(newElement， targetElement)

    7.3.2 在现有方法后插入一个新元素

        （1）DOM并没有提供与insertBefore方法相对应insertAfter方法。

        1. 编写insertAfter函数

        

        2. 使用insertAfter函数

    7.3.3 图片库二次改进版

7.4 Ajax

        （1）以前的Web应用，即使用户看到的只是页面中的一小部分有变化，也要刷新和重新加载整个页面。

        （2）使用Ajax就可以做到只更新页面的一小部分。

        （3）Ajax的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容而不会打断用户的浏览体验。

    7.4.1 XMLHttpRequest对象

        （1）Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。

        （2）在为onreadystatechange指定函数引用时，不要在函数名后面加括号。因为加括号表示立即调用函数，而我们在此只想把函数本身的引用，而不是函数结果，赋值给onreadystatechange属性。

        （3）在使用Ajax时，千万要注意同源策略。使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求。

        （4）有些浏览器还会限制Ajax请求使用的协议。如Chrome中跨域请求只支持HTTP协议。

        （5）异步请求有一个容易被忽略的问题是异步性，就是脚本在发送XMLHttpRequest请求之后，仍然会继续执行，不会等待响应返回。

        （6）如果其他脚本依赖于服务器的响应，那么就得把相应的代码都转移到指定给onreadystatechange属性的那个函数中。

        （7）Ajax之挑战：

            

    7.4.2 渐进增强与Ajax

    7.4.3 Hijax

        （1）Hijax，指的是渐进增强地使用Ajax。

        （2）Ajax应用主要依赖后台服务器，实际上是服务器端的脚本语言完成了绝大部分工作。XMLHttpRequest对象作为浏览器与服务器之间的中间人，它只是负责传递请求和响应。

7.5 小结