第七章

动态创建标记

document.write 方法：
```
  <script>
      document.write("<p>xxxxxxx</p>");
  </script>
```
缺点是违背了“行为与表现分离原则”，即使把语句写到外部函数中，还是需要加入<script>标签才能调用，不推荐
innerHTML 属性:
```
  var testdiv = document.getElementById("testdiv");
  testdiv.innerHTML = "<p>xxxxxxx</p>"
```
可读可写，简单粗暴，缺点是没法细化操作，而且会直接替换元素里面所有内容。
createElement 方法
```
  document.createElement(nodeName)
```
创建一个元素节点
createTextNode 方法
```
  document.createTextNode(text)
```
创建一个文本节点
appendChild 方法

节点创建后属于“野生”的，还需要加入节点树，appendChild 方法可以为某个节点添加子节点
```
  parent.appendChild(child)
```

insertBefore 方法

  parentElement.insertBefore(newElement, targetElement)

在 targetElement 前插入一个新节点，其中父元素节点 parentElement 可以由 targetElement 的 parentNode 属性得到。用法如下：

  var gallery = document.getElementById("imagegallery");
  gallery.parentNode.insertBefore(placeholder, gallery);

insertAfter “方法”

DOM并没有提供 insertAfter 方法，不过我们可以直接创建一个：

  function insertAfter(newElement, targetElement ) {
      var parent = targetElement.parentNode;
      if (parent.lastChild == targetElement){
          parent.appendChild(newElement);
      } else {
          parent.insertBefore(newElement, targetElement.nextSibling);
      }
  }

其中的 nextSibling 属性是指目标元素节点的下一个兄弟元素

Ajax

解释：

一种异步加载技术，可以做得到局部更新页面中的一部分，而不用整体重新加载。其优势在于对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来相应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。
XMLHttpRequest 对象

XMLHttpRequest 对象充当着客户端与服务器之间的中间人角色。JavaScript可以通过这个对象自己发送请求和处理响应。

创建 XMLHttpRequest 对象

旧版本的Internet Explorer（IE5和IE6）中使用 ActiveX 对象

var request = new ActiveXObject("Microsoft.XMLHTTP");

其他浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）

var request = new XMLHttpRequest();

整合成 getHTTPObject 函数

function getHTTPObject() {
//兼容不同版本IE
if (typeof XMLHttpRequest == "undefined") {
    try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
        catch (e) {}
    try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
        catch (e) {}
    try {return new ActiveXObject("Msxml2.XMLHTTP");}
        catch (e) {}
    return false;
}
return new XMLHttpRequest();

XMLHttpRequest 对象的 open 和 send方法
1. open 方法用来规定请求的类型、URL 以及是否异步处理请求。
  有三个参数：
  - method：请求的类型；GET 或 POST
  - url：文件在服务器上的位置
  - async：true（异步）或 false（同步）
  实例：
```
 xmlhttp.open("GET","demo_get.html",true);
```
2. send 方法将请求发送到服务器。
  有一个参数：
  - string：仅用于 POST 请求
事件处理函数 onreadystatechange , readyState 属性和 status 属性
1. onreadystatechange
  
  当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。
2. readyState
  
  服务器在向 XMLHttpRequest 对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新 readyState 的值，有5个可能的值：
  - 0: 请求未初始化
  - 1: 服务器连接已建立
  - 2: 请求已接收
  - 3: 请求处理中
  - 4: 请求已完成，且响应已就绪
3. status
  - 200: "OK"
  - 404: 未找到页面
4. 实例：
```
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
```

获取服务器返回的数据

主要通过两个属性：responseText 和 responseXML

responseText：获得字符串形式的响应数据。

 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML：用于保存 Content-Type 头部中指定为“text/xml”的数据，其实是一个DocumentFragment 对象。

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;