Ajax學習筆記

異步JavaScript和XML
1.無需重載頁面，部分更新頁面。
2.工作原理：瀏覽器端產生XMLHttpRequest對象，發送請求
服務器接收到請求創建response返回需要的數據
瀏覽器端處理數據更新部分頁面
3.創建 XMLHttpRequest 對象的語法：

 variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

 variable=new ActiveXObject("Microsoft.XMLHTTP");

兼容創建：var xmlhttp;

 if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

4.GET向服務器發送請求，參數直接URL傳值

  .open("方法",url,是否異步處理);
  xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
  xmlhttp.send();

5.POST請求的使用情況：
無法使用緩存文件 向服務器發送大量數據 發送未知字符的用戶輸入
如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。
然後在 send() 方法中規定您希望發送的數據：

xmlhttp.open("POST","ajax_test.html",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    mlhttp.send("fname=Henry&lname=Ford");

6.優勢機制：在等待響應時執行其他腳本，響應就緒後再進行處理
7.編寫回調函數

.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)//響應就緒，狀態ok
      {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }

8.如果異步同步設置爲false，不用編寫onreadystatechange 函數
把代碼放到 send()語句後面即可；
缺點：腳本會掛起直到服務器返回數據。
9.服務器返回responseText/responseXML
XML文件處理：

 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;

10.onreadystatechange事件
readystate：
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
status：
200：OK
404未找到頁面
11.多個Ajax回調下，使用標準函數，回調函數作爲參數傳入

function loadXMLDoc(url,cfunc)
    {
        if (window.XMLHttpRequest)
        {// IE7+, Firefox, Chrome, Opera, Safari 代碼
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// IE6, IE5 代碼
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    }

12.Ajax數據庫通信 php/asp/jsp等後臺實現。
13.Ajax XML處理

    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");//獲取特定標籤
    for (i=0;i<x.length;i++)//遍歷

14.相關實例
http://www.w3cschool.cc/ajax/ajax-examples.html