第七章

动态创建标记

• 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

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

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

  2. 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;
     

• 同源策略

  使用 XMLHttpRequest 对象发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求。