ajax學習摘抄筆記

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

    AJAX 不是新的編程語言，而是一種使用現有標準的新方法。

    AJAX 最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。

    AJAX 不須要任何瀏覽器插件，但須要用戶容許JavaScript在瀏覽器上執行。

AJAX 應用

• 運用XHTML+CSS來表達資訊；

• 運用JavaScript操做DOM（Document Object Model）來執行動態效果；

• 運用XML和XSLT操做資料;

• 運用XMLHttpRequest或新的Fetch API與網頁服務器進行異步資料交換；

• 注意：AJAX與Flash、Silverlight和Java Applet等RIA技術是有區分的。

  AJAX是基於現有的Internet標準

  AJAX是基於現有的Internet標準，而且聯合使用它們：

• XMLHttpRequest 對象 (異步的與服務器交換數據)
• JavaScript/DOM (信息顯示/交互)

• AJAX應用程序與瀏覽器和平臺無關的！

• CSS (給數據定義樣式)
• XML (做爲轉換數據的格式)

  AJAX - 建立 XMLHttpRequest 對象

  XMLHttpRequest 是 AJAX 的基礎。

  XMLHttpRequest 對象

  全部現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

  XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

  建立 XMLHttpRequest 對象

  全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

  建立 XMLHttpRequest 對象的語法：

  variable=new XMLHttpRequest();

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

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

  爲了應對全部的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。若是支持，則建立 XMLHttpRequest 對象。若是不支持，則建立 ActiveXObject ：
   

  向服務器發送請求

  如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

  xmlhttp.open("GET","ajax_info.txt",true);
  xmlhttp.send();

  方法	描述
  open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。 method：請求的類型；GET 或 POST url：文件在服務器上的位置 async：true（異步）或 false（同步）
  send(string)	將請求發送到服務器。 string：僅用於 POST 請求

  
  GET 仍是 POST？

  與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

  然而，在如下狀況中，請使用 POST 請求：

• 沒法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 沒有數據量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

  Async=true

  當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：

  實例

  xmlhttp.onreadystatechange=function(){
  if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
  }
  xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();

  Async = false

  如需使用 async=false，請將 open() 方法中的第三個參數改成 false：

  xmlhttp.open("GET","test1.txt",false);

  咱們不推薦使用 async=false，可是對於一些小型的請求，也是能夠的。

  請記住，JavaScript 會等到服務器響應就緒才繼續執行。若是服務器繁忙或緩慢，應用程序會掛起或中止。

  注意：當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面便可：

  實例

  xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
  xmlhttp.send();
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  服務器響應

  如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

  屬性	描述
  responseText	得到字符串形式的響應數據。
  responseXML	得到 XML 形式的響應數據。

   

  onreadystatechange 事件

  當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。

  每當 readyState 改變時，就會觸發 onreadystatechange 事件。

  readyState 屬性存有 XMLHttpRequest 的狀態信息。

  下面是 XMLHttpRequest 對象的三個重要的屬性：

  屬性	描述
  onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
  readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
  status	200: "OK" 404: 未找到頁面

  在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。

  當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：
   

  100——客戶必須繼續發出請求

  101——客戶要求服務器根據請求轉換HTTP協議版本

  200——交易成功

  201——提示知道新文件的URL

  202——接受和處理、但處理未完成

  203——返回信息不肯定或不完整

  204——請求收到，但返回信息爲空

  205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件

  206——服務器已經完成了部分用戶的GET請求

  300——請求的資源可在多處獲得

  301——刪除請求數據

  302——在其餘地址發現了請求數據

  303——建議客戶訪問其餘URL或訪問方式

  304——客戶端已經執行了GET，但文件未變化

  305——請求的資源必須從服務器指定的地址獲得

  306——前一版本HTTP中使用的代碼，現行版本中再也不使用

  307——申明請求的資源臨時性刪除

  400——錯誤請求，如語法錯誤

  401——請求受權失敗

  402——保留有效ChargeTo頭響應

  403——請求不容許

  404——沒有發現文件、查詢或URl

  405——用戶在Request-Line字段定義的方法不容許

  406——根據用戶發送的Accept拖，請求資源不可訪問

  407——相似401，用戶必須首先在代理服務器上獲得受權

  408——客戶端沒有在用戶指定的時間內完成請求

  409——對當前資源狀態，請求不能完成

  410——服務器上再也不有此資源且無進一步的參考地址

  411——服務器拒絕用戶定義的Content-Length屬性請求

  412——一個或多個請求頭字段在當前請求中錯誤

  413——請求的資源大於服務器容許的大小

  414——請求的資源URL長於服務器容許的長度

  415——請求資源不支持請求項目格式

  416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段

  417——服務器不知足請求Expect頭字段指定的指望值，若是是代理服務器，多是下一級服務器不能知足請求

  500——服務器產生內部錯誤

  501——服務器不支持請求的函數

  502——服務器暫時不可用，有時是爲了防止發生系統過載

  503——服務器過載或暫停維修

  504——關口過載，服務器使用另外一個關口或服務來響應用戶，等待時間設定值較長

  505——服務器不支持或拒絕支請求頭中指定的HTTP版本

  ajax實例：http://www.runoob.com/ajax/ajax-examples.html