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

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

此篇文章的地址：Ajax基礎相關

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

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

Ajax優點

傳輸獲取數據 , 不用跳轉頁面，在本頁面請求服務器，做到實時驗證。
減少用戶返工率并且優化用戶體驗。

把數據放在url中發送，以獲取數據為主

1、創建一個ajax對象

var ajax = new XMLHttpRequest();

2、傳入請求參數

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

3、發送數據

ajax.send(null);

send()方法傳入一個參數，即要作為請求主體發送的數據。如果不需要通過請求主體發送數據，則必須傳入null，因為這個參數對有些瀏覽器來說是必需的。

1、用get方式請求，是有長度限制的。因為是通過地址欄的查詢信息來請求的。（即get通過url地址傳輸，post通過瀏覽器內部傳輸）

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

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

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

4、有緩存問題 解決方法：在url？后面連接一個隨機數，時間戳

數據放在 send() 中發送

1、創建一個ajax對象

var ajax = new XMLHttpRequest();

2、傳入請求參數

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

3、設置請求頭

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

// 要成功的發送請求頭部信息，必須在調用open() 方法之后且調用send()方法之前調用setRequestHeader()

4、發送數據

ajax.send("user=cfangxu")

用post方式請求，理論上來說是沒有長度或體積限制的，看具體瀏覽器和后端的設置。

數據是通過http正文（請求體-請求正文）進行發送的，不會直接的暴露用戶的信息，并且發送的數據不會被瀏覽器緩存，相對來說是比較安全的。

在send()的前面需要設置一個請求頭（不設置要出錯）。

post提交的數據格式有多種

    text/plain
    application/x-www-form-urlencoded - 默認
    multipart/form-data

在post提交數據的時候，需要設置請求頭content-type:值可以為上面三中類型之一

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

open的時候，不用像get那樣去拼數據，拼接數據是在send中填寫。

屬于html5的，有兼容性問題

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

支持IE6，兼容性好。

其中的readyState屬性：請求狀態 
0  （未初始化）還沒有調用open()方法0是監聽不到的
1  啟動，open()?方法已經被調用。
2  發送，send() 方法已經被調用，但尚未接收到響應。 
3  接收，已經接收到部分相應數據。 
4  完成，已經接收到全部響應數據，而且可以在客戶端使用了。

readyState : ajax工作狀態
onreadystatechange : 當readyState改變的時候觸發
status : 服務器狀態，http狀態碼
responseText : 返回以文本形式存放的內容 ajax請求返回的內容就被存放到這個屬性下面

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

new XMLHttpRequest() ie6 及以下不支持，所以需要用到插件
new ActiveXObject("MSXML2.XMLHTTP")
IE中會有三種不同的XHR版本： MSXML2.XMLHTTP 、 MSXML2.XMLHTTP.3.0 、 MSXML2.XMLHTTP.6.0 因為只做了解，這里用最老的那一版

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

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

form 標簽的一些屬性

action : 數據提交的地址，默認是當前頁面

method : 數據提交的方式，默認是get方式
    1.get
    把數據名稱和數據值用=連接，如果有多個的話，那么他會把多個數據組合用&進行連接，然后把數據放到url?后面傳到指定頁面
    2.post
    通過請求頭進行請求

enctype : 提交的數據格式，默認application/x-www-form-urlencoded

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

           
           

action會跳轉頁面

var ajax = new XMLHttpRequest();

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

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

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

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

ajax.send(fromD)


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

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

3.send(這個對象)

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

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

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

append()方法接收兩個參數：鍵和值，分別對應表單字段的名字和字段中包含的值。可以像上面代碼一樣添加任意多個值。

FormData 構造函數可以直接傳入表單元素，表單元素的數據預先向其中填入鍵值對。

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

FormData的另一個方便之處在于用其發送POST請求可以不必明確地在XHR對象上設置請求頭部，XHR對象能夠識別傳入的數據類型是FormData的實例，并配置適當的頭部信息。

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

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

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

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);

這個事件會在瀏覽器接收新數據期間周期性地觸發。事件監聽函數會接收到一個event對象，其target屬性是XHR對象，但是包含著三個額外的屬性：lengthComputable、position和totalSize。

lengthComputable: 是一個表示進度信息是否可用的布爾值。

position: 表示已經接收的字節數

totalSize: 表示根據Content-Length響應頭部確定的預期字節數。

這些信息可以用來展示進度。

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 + "字節";
    }
}
xhr.open("get","test.php",true);
xhr.send(null);

為確保正常執行，必須在調用open()方法之前添加onprogress事件監聽函數。

readyState
responseType
responseText
responseXML
status
statusText
withCredentials

abort() abort方法用來終止已經發出的HTTP請求。
getAllResponseHeaders()
getResponseHeader()
open()
send()
setRequestHeader()
overrideMimeType()

readyStateChange事件
progress事件
load事件