Ajax

• AJAX即“Asynchronous Javascript And XML”（ 異步 JavaScript和XML）祟昭，AJAX不是一種新的編程語(yǔ)言臊恋，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的 Web 應(yīng)用程序的技術(shù)。它是一套綜合了多項(xiàng)技術(shù)的瀏覽器端網(wǎng)頁(yè)開發(fā)技術(shù)虱肄。這些技術(shù)包括Javascript致板、XHTML和CSS、DOM浩峡、XML和XMLHttpRequest.
• 通過(guò)在瀏覽器與服務(wù)器進(jìn)行少量數(shù)據(jù)交換可岂，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下翰灾，對(duì)網(wǎng)頁(yè)的局部更新缕粹。
• 優(yōu)點(diǎn):
  1.使用Ajax的最大優(yōu)點(diǎn)，就是能在不更新整個(gè)頁(yè)面的前提下維護(hù)數(shù)據(jù)纸淮。這使得Web應(yīng)用程序更為迅捷地響應(yīng)用戶動(dòng)作平斩，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒(méi)有改變的html代碼信息。
  2.減輕服務(wù)器負(fù)擔(dān)咽块，按需要獲得數(shù)據(jù)绘面。
  3.無(wú)刷新更新頁(yè)面，減少用戶的實(shí)際和心理的等待時(shí)間侈沪。
  4.更好的用戶體驗(yàn)揭璃。
  5.減輕寬帶的負(fù)擔(dān)。
  6.主流瀏覽器支持
• 缺點(diǎn):
  1.AJAX大量使用了Javascript和AJAX引擎亭罪，而這個(gè)取決于瀏覽器的支持瘦馍。IE5.0及以上、Mozilla1.0应役、NetScape7及以上版本才支持情组，Mozilla雖然也支持AJAX燥筷，但是提供XMLHttpRequest的方式不一樣。所以院崇，使用AJAX的程序必須測(cè)試針對(duì)各個(gè)瀏覽器的兼容性肆氓。
  2.AJAX更新頁(yè)面內(nèi)容的時(shí)候并沒(méi)有刷新整個(gè)頁(yè)面，因此底瓣，網(wǎng)頁(yè)的后退功能是失效的谢揪；有的用戶還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過(guò)的。這個(gè)就需要在明顯位置提醒用戶“數(shù)據(jù)已更新”濒持。
  3.對(duì)搜索引擎支持不好键耕。

XMLHttpRequest 對(duì)象

Ajax主要通過(guò)使用XMLHttpRequest對(duì)象來(lái)實(shí)現(xiàn)異步數(shù)據(jù)交互和通信
1.非IE瀏覽器和高版本的IE瀏覽器

var xhr = new XMLHttpRequest();

2.老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對(duì)象

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

3.兼容處理

//Ajax.js    
function createAjax() {
  var xhr ;
  if(window.XMLHttpRequest){
    //所有現(xiàn)代瀏覽器 (IE7+、Firefox柑营、Chrome、Safari 以及 Opera) 都內(nèi)建了 XMLHttpRequest 對(duì)象村视。
    xhr = new XMLHttpRequest();
  }else {
    //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對(duì)象：
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xhr;
}

• XHR的用法
  1.方法：

2.屬性：

3.基本使用：

//>>1.創(chuàng)建Ajax引擎對(duì)象
var xmlHttpRequest= createAjax();
//>>2.設(shè)置發(fā)送請(qǐng)求時(shí)需要具備的數(shù)據(jù)
  //>>2.1.指定請(qǐng)求url地址(注意還沒(méi)有發(fā)出請(qǐng)求僅僅是設(shè)置請(qǐng)求地址和請(qǐng)求方式)
  xmlHttpRequest.open('GET/POST','url地址',[ '是否異步']);
  //>>2.2.監(jiān)聽(tīng)Ajax引擎對(duì)象的改變
  xmlHttpRequest.onreadystatechange=function(){
      //當(dāng)請(qǐng)求和響應(yīng)同時(shí)完成,從Ajax引擎中獲取響應(yīng)內(nèi)容,然后通過(guò)javascript對(duì)網(wǎng)頁(yè)進(jìn)行操作
      if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
          //根據(jù)相應(yīng)內(nèi)容對(duì)網(wǎng)頁(yè)進(jìn)行操作的代碼通常寫在這里
          // xmlHttpRequest. responseText
//          //xmlHttpRequest. responseXML
      }
  }
//>>3.發(fā)送請(qǐng)求
xmlHttpRequest.send([post請(qǐng)求參數(shù)字符串])

• HTTP頭部信息
  每個(gè)HTTP請(qǐng)求和響應(yīng)都會(huì)帶有相應(yīng)的頭部信息因悲，XHR對(duì)象也提供了操作這兩種頭部信息的方法。
  默認(rèn)情況下勺爱，在發(fā)送XHR請(qǐng)求的同時(shí)還會(huì)發(fā)送下列頭部：
  1.Accept
  2.Accept-Charset
  3.Accept-Encoding
  4.Accept-Language
  5.Connection
  6.Cookie
  7.Host
  8.Referer
  9.User-Agent
  使用setRequestHeader()方法可以設(shè)置自定義的請(qǐng)求頭部晃琳。參數(shù)為頭部字段的名稱和頭部字段的值。這個(gè)要在open和send之間調(diào)用才有效琐鲁。
  在使用這個(gè)方法時(shí)卫旱，建議使用自定義的頭部名，以免與瀏覽器發(fā)生沖突围段，有的瀏覽器可能不允許開發(fā)人員重寫默認(rèn)頭部顾翼。
  想要獲得頭部的值可以使用下面這兩種方法。

xhr.setRequestHeader("MyHeader", "MyValue");

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

• GET請(qǐng)求
  用于向服務(wù)器查詢某些信息蒜撮，將參數(shù)放到后面暴构。使用addURLParam就是保證URI被正確編碼跪呈，格式良好。

var xhr = new XMLHttpRequest();
function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
var url = "example.php";
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");

xhr.open("get", url, true);
xhr.send(null);

• POST請(qǐng)求
  用于向服務(wù)器發(fā)送應(yīng)該保存的數(shù)據(jù)取逾，POST請(qǐng)求應(yīng)該會(huì)發(fā)送很多的數(shù)據(jù)到服務(wù)器耗绿。這時(shí)send的參數(shù)就是發(fā)送的數(shù)據(jù)了。一般是數(shù)據(jù)序列化后的字符串砾隅。

var xhr = new XMLHttpRequest();
xhr.open("post", "postexample.php", true);
//模仿表單提交
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

<?php
  header("Content-type: text/plain");
  echo <<<EOF
Name:{$_POST['user-name'};
Emial:{$_POST('user-email')};
EOF;

GET請(qǐng)求消耗的資源少误阻，同等數(shù)據(jù)量是POST的兩倍。

XMLHttpRequest 二級(jí)

• FormData
  Web應(yīng)用中頻繁使用的一項(xiàng)功能就是表單數(shù)據(jù)的序列化晴埂。為此究反，2級(jí)定義了FormData對(duì)象。
  append方法可以向其添加數(shù)據(jù)儒洛，鍵值對(duì)形式
  也可以直接使用表單初始化FormData：

//鍵值對(duì)形式
var data = new FormData();
data.append("name", "Nicholas");
//使用表單初始化FormData
var data = new FormData(document.forms[0]);
xhr.send(data);

• 超時(shí)限定
  2級(jí)中又規(guī)定了一個(gè)timeout屬性精耐，表示請(qǐng)求在等待響應(yīng)多少毫秒之后就終止。設(shè)置之后琅锻，如果超時(shí)沒(méi)有接收到響應(yīng)卦停，就回觸發(fā)timeout事件，調(diào)用事件處理程序恼蓬，這時(shí)xhr.readyState可能已經(jīng)為4了惊完，但是此時(shí)請(qǐng)求已經(jīng)中止了，不能再訪問(wèn)xhr.status处硬，所以如果使用timeout小槐，onreadystatechange事件處理也要小心。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        try {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        } catch (ex){

        }
    }
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //      IE8+
xhr.ontimeout = function(){
    alert("Request did not return in a second.");
};
xhr.send(null);

• overrideMimetype()
  重寫XHR響應(yīng)的MIME類型荷辕，因?yàn)轫憫?yīng)的MIME類型決定了XHR對(duì)象如何處理它凿跳。如果服務(wù)器返回的是XML文件，MIME卻是text/plain桐腌，那XHR對(duì)象就不能正確的設(shè)置responseXML拄显。
  要在send之前調(diào)用這個(gè)方法。

var xhr = createXHR(); xhr.open("get", "text.php", true); xhr.overrideMimeType("text/xml"); xhr.send(null);