摘要：在拼接數(shù)據(jù)的時(shí)候要用來包一下，不然在低版本瀏覽器中使用中文會(huì)亂碼的。如果后端返回的內(nèi)容有中文編碼格式，那么直接輸入到頁(yè)面中就能變成中文了。事件這個(gè)事件會(huì)在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。

最近一直在搞基礎(chǔ)的東西，弄了一個(gè)持續(xù)更新的github筆記，可以去看看，誠(chéng)意之作（本來就是寫給自己看的……）鏈接地址：Front-End-Basics

此篇文章的地址：Ajax基礎(chǔ)相關(guān)

基礎(chǔ)筆記的github地址：https://github.com/qiqihaobenben/Front-End-Basics ,可以watch,也可以star。

Asynchronous JavaScript and XML : 異步的js和XML，前后端數(shù)據(jù)交互的一種技術(shù)。

Ajax優(yōu)點(diǎn)

傳輸獲取數(shù)據(jù) , 不用跳轉(zhuǎn)頁(yè)面，在本頁(yè)面請(qǐng)求服務(wù)器，做到實(shí)時(shí)驗(yàn)證。
減少用戶返工率并且優(yōu)化用戶體驗(yàn)。

把數(shù)據(jù)放在url中發(fā)送，以獲取數(shù)據(jù)為主

1、創(chuàng)建一個(gè)ajax對(duì)象

var ajax = new XMLHttpRequest();

2、傳入請(qǐng)求參數(shù)

//method,url,true    參數(shù)
ajax.open("get","php/get.php?user="+encodeURIComponent(value),true);

3、發(fā)送數(shù)據(jù)

ajax.send(null);

send()方法傳入一個(gè)參數(shù)，即要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)。如果不需要通過請(qǐng)求主體發(fā)送數(shù)據(jù)，則必須傳入null，因?yàn)檫@個(gè)參數(shù)對(duì)有些瀏覽器來說是必需的。

1、用get方式請(qǐng)求，是有長(zhǎng)度限制的。因?yàn)槭峭ㄟ^地址欄的查詢信息來請(qǐng)求的。（即get通過url地址傳輸，post通過瀏覽器內(nèi)部傳輸）

2、請(qǐng)求信息在地址欄中顯示，直接暴露了用戶填寫的信息，并且訪問的數(shù)據(jù)會(huì)被瀏覽器緩存到歷史記錄中，所以說不安全。

3、在get拼接數(shù)據(jù)的時(shí)候要用encodeURIComponent來包一下，不然在IE低版本瀏覽器中使用中文會(huì)亂碼的。

encodeURIComponent("劉")  轉(zhuǎn)成url
decodeURIComponent("%E5%88%98")  轉(zhuǎn)成中文

4、有緩存問題 解決方法：在url？后面連接一個(gè)隨機(jī)數(shù)，時(shí)間戳

數(shù)據(jù)放在 send() 中發(fā)送

1、創(chuàng)建一個(gè)ajax對(duì)象

var ajax = new XMLHttpRequest();

2、傳入請(qǐng)求參數(shù)

ajax.open("post","php/post.php",true);
//method,url,true三個(gè)參數(shù)的含義
1、提交方式 Form-method 
2、提交地址 Form-action 
3、異步（同步）
異步:非阻塞 前面的代碼不會(huì)影響后面代碼的執(zhí)行
同步:阻塞 前面的代碼會(huì)影響后面代碼的執(zhí)行

3、設(shè)置請(qǐng)求頭

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

// 要成功的發(fā)送請(qǐng)求頭部信息，必須在調(diào)用open() 方法之后且調(diào)用send()方法之前調(diào)用setRequestHeader()

4、發(fā)送數(shù)據(jù)

ajax.send("user=cfangxu")

用post方式請(qǐng)求，理論上來說是沒有長(zhǎng)度或體積限制的，看具體瀏覽器和后端的設(shè)置。

數(shù)據(jù)是通過http正文（請(qǐng)求體-請(qǐng)求正文）進(jìn)行發(fā)送的，不會(huì)直接的暴露用戶的信息，并且發(fā)送的數(shù)據(jù)不會(huì)被瀏覽器緩存，相對(duì)來說是比較安全的。

在send()的前面需要設(shè)置一個(gè)請(qǐng)求頭（不設(shè)置要出錯(cuò)）。

post提交的數(shù)據(jù)格式有多種

    text/plain
    application/x-www-form-urlencoded - 默認(rèn)
    multipart/form-data

在post提交數(shù)據(jù)的時(shí)候，需要設(shè)置請(qǐng)求頭content-type:值可以為上面三中類型之一

ajax.setRequestHeader( "Content-Type","application/x-www-form-urlencoded");

open的時(shí)候，不用像get那樣去拼數(shù)據(jù)，拼接數(shù)據(jù)是在send中填寫。

屬于html5的，有兼容性問題

ajax.onload = function () {
    //打印傳輸過來的數(shù)據(jù)
    console.log(ajax.responseText)
}

支持IE6，兼容性好。

其中的readyState屬性：請(qǐng)求狀態(tài) 
0  （未初始化）還沒有調(diào)用open()方法0是監(jiān)聽不到的
1  啟動(dòng)，open()?方法已經(jīng)被調(diào)用。
2  發(fā)送，send() 方法已經(jīng)被調(diào)用，但尚未接收到響應(yīng)。 
3  接收，已經(jīng)接收到部分相應(yīng)數(shù)據(jù)。 
4  完成，已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且可以在客戶端使用了。

readyState : ajax工作狀態(tài)
onreadystatechange : 當(dāng)readyState改變的時(shí)候觸發(fā)
status : 服務(wù)器狀態(tài)，http狀態(tài)碼
responseText : 返回以文本形式存放的內(nèi)容 ajax請(qǐng)求返回的內(nèi)容就被存放到這個(gè)屬性下面

事件監(jiān)聽最好寫在事件發(fā)生之前(即.onload（.onreadystatechange）要放在.send之前)，避免沒有監(jiān)聽到。

new XMLHttpRequest() ie6 及以下不支持，所以需要用到插件
new ActiveXObject("MSXML2.XMLHTTP")
IE中會(huì)有三種不同的XHR版本： MSXML2.XMLHTTP 、 MSXML2.XMLHTTP.3.0 、 MSXML2.XMLHTTP.6.0 因?yàn)橹蛔隽私猓@里用最老的那一版

兼容寫法如下：
var xhr = null;
if (window.XMLHttpRequest) {    
   //直接用XMLHttpRequest是不能做判斷的，因?yàn)镮E6下沒有，window.XMLHttpRequest會(huì)返回undefined
   xhr = new XMLHttpRequest();
} else {
   xhr = new ActiveXObject("MSXML2.XMLHTTP");
}

也可以用try catch來解決。
try {
   xhr = new XMLHttpRequest();
} catch (e) {
   xhr = new ActiveXObject("MSXML2.XMLHTTP");
}

form 標(biāo)簽的一些屬性

action : 數(shù)據(jù)提交的地址，默認(rèn)是當(dāng)前頁(yè)面

method : 數(shù)據(jù)提交的方式，默認(rèn)是get方式
    1.get
    把數(shù)據(jù)名稱和數(shù)據(jù)值用=連接，如果有多個(gè)的話，那么他會(huì)把多個(gè)數(shù)據(jù)組合用&進(jìn)行連接，然后把數(shù)據(jù)放到url?后面?zhèn)鞯街付?yè)面
    2.post
    通過請(qǐng)求頭進(jìn)行請(qǐng)求

enctype : 提交的數(shù)據(jù)格式，默認(rèn)application/x-www-form-urlencoded

不管是form還是ajax,上傳必須要用post請(qǐng)求方式來傳輸。如果后端返回的內(nèi)容有中文編碼格式，那么直接輸入到頁(yè)面中就能變成中文了。

           
           

action會(huì)跳轉(zhuǎn)頁(yè)面

var ajax = new XMLHttpRequest();

ajax.open("post","post_file.php",true);

//傳輸類型設(shè)置為二進(jìn)制的格式
ajax.setRequestHeader("Content-Type","multipart/form-data");

//二進(jìn)制傳輸在寫入send前要用FormData轉(zhuǎn)換
var fromD = new FormData();    

//FormData構(gòu)造函數(shù)中有一個(gè)append方法
//在file中，有一個(gè)對(duì)象：files（詳細(xì)信息的列表）files[0]里面是files的具體參數(shù)；
fromD.append("file",f.files[0]);    

ajax.send(fromD)


ajax的上傳方式需要注意以下幾點(diǎn)：
1.new FormData()

2.給這個(gè)對(duì)象append(key,value)
key：跟后端的要求走
value:file元素的files[0];

3.send(這個(gè)對(duì)象)

上面的ajax上傳文件用到的 FormData 類型就是 XMLHttpRequest 2級(jí)中定義的。

FormData 為序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)(用于XHR傳輸)提供了便利。

var data = new FormData();
data.append("name","cfangxu");

append()方法接收兩個(gè)參數(shù)：鍵和值，分別對(duì)應(yīng)表單字段的名字和字段中包含的值?？梢韵裆厦娲a一樣添加任意多個(gè)值。

FormData 構(gòu)造函數(shù)可以直接傳入表單元素，表單元素的數(shù)據(jù)預(yù)先向其中填入鍵值對(duì)。

var data = new FormData(document.forms[0]);

FormData的另一個(gè)方便之處在于用其發(fā)送POST請(qǐng)求可以不必明確地在XHR對(duì)象上設(shè)置請(qǐng)求頭部，XHR對(duì)象能夠識(shí)別傳入的數(shù)據(jù)類型是FormData的實(shí)例，并配置適當(dāng)?shù)念^部信息。

重寫XHR響應(yīng)的MIME類型，比如服務(wù)器返回的MIME類型是 text/plain，但是數(shù)據(jù)中實(shí)際包含的是XML。根據(jù)MIME類型，即使數(shù)據(jù)是XML， responseXML屬性中仍然是null，通過調(diào)用 overrideMimeType()方法，可以保證把響應(yīng)當(dāng)做XML而并非文本來處理。

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

上面提到過，用load事件替代readystatechange,響應(yīng)接收完畢后會(huì)觸發(fā)load事件，所以也就沒有必要去檢查readyState屬性了，不過只要瀏覽器接收到服務(wù)器的響應(yīng)，不管狀態(tài)如何，都會(huì)觸發(fā)load事件。所以必須要檢查status屬性，才能確定數(shù)據(jù)是否真的是可用的。

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    if(xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
    }else {
        console.log("Request is unsuccessful" + xhr.status)
    }
}
xhr.open("get","test.php",true);
xhr.send(null);

這個(gè)事件會(huì)在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。事件監(jiān)聽函數(shù)會(huì)接收到一個(gè)event對(duì)象，其target屬性是XHR對(duì)象，但是包含著三個(gè)額外的屬性：lengthComputable、position和totalSize。

lengthComputable: 是一個(gè)表示進(jìn)度信息是否可用的布爾值。

position: 表示已經(jīng)接收的字節(jié)數(shù)

totalSize: 表示根據(jù)Content-Length響應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。

這些信息可以用來展示進(jìn)度。

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    if(xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
    }else {
        console.log("Request is unsuccessful" + xhr.status)
    }
}
xhr.onprogress = function (event) {
    var showEle = document.getElementById("status");
    if(event.lengthComputable){
        showEle.innerHTML = "接收" + event.position + "of" + event.totalSize + "字節(jié)";
    }
}
xhr.open("get","test.php",true);
xhr.send(null);

為確保正常執(zhí)行，必須在調(diào)用open()方法之前添加onprogress事件監(jiān)聽函數(shù)。

readyState
responseType
responseText
responseXML
status
statusText
withCredentials

abort() abort方法用來終止已經(jīng)發(fā)出的HTTP請(qǐng)求。
getAllResponseHeaders()
getResponseHeader()
open()
send()
setRequestHeader()
overrideMimeType()

readyStateChange事件
progress事件
load事件