第七章

動態創建標記

• 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處于同一個域中的數據，不能向其他域發送請求。