Ajax進階 FormData對象

　　Ajax基礎：http://www.cnblogs.com/-beyond/p/7919369.html

xhr 2.0及FormData介紹

　　FormData對象 其實和 XMLHttpRequest對象 是同樣的，和Date，Array這些對象也是同樣的，都是window對象的屬性。

　　前面那個連接中內容全是XMLHttpRequest 1.0版本。。可是既然ajax這麼好用，天然就要擴展了，作了點升級，因而就有了XMLHttpRequest 2.0，人稱XMLHttpRequest 2級。

　　想一想若是使用post方式請求數據的時候，同時又提交了一些數據，因而就要設置一些Content-Type爲x-www-form-urlencoded頭部信息，不然後端程序收到以後，不能經過$_POST來獲取（針對PHP），

　　並且若是想要使用ajax來發送文件，那麼，困難仍是有的。

　　因此呢，XMLHttpRequest 2.0版本中就增長一個狠角色——FormData對象 ，爲何說他狠呢，由於，能夠把一個實例化的FormData對象直接做爲xhr.send的參數，而不須要設置頭部信息。同時支持發送文件，其實都沒啥的。對於FormData來講也就是小case。

　　

FormData屬性及方法

　　能夠經過console.log(window)來找到FormData對象，看一看他的屬性和方法

　　方法：見名知意

　　set("key","value")

　　append("key","value")

　　delete("key")   

　　get("key")

　　getAll("key")   

 

使用FormData

　　下面是FormData的使用示例：

var fd = new FormData();

//set會覆蓋，簡記爲設置單一變量
fd.set("name","test");
fd.set("name","demo");
console.log(fd.get("name")); //demo
console.log(fd.getAll("name")); //["demo"]

//append會建立一個數組，key就是數組名
fd.append("name","abc");
fd.append("name","xyz");
console.log(fd.get("name")); //abc
console.log(fd.getAll("name"));//["abc", "xyz"]

//刪除key的值
fd.delete("name");
console.log(fd.get("name")); //null

　　

FormData搭配XMLhttpRequest

　　就如開頭所說的，FormData對象直接做爲xhr.send的參數，便可發送數據，前提是否是get方法，能夠是post方法（一般都是）。

var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("name[]","demo");
fd.append("name[]","test");
//注意要傳遞數組的話，必定要在key後面加一個[],不然服務器只能收到最後一次append的值
xhr.open("post","recieve.php",true);
xhr.send(fd);
xhr.onreadystatechange = function(){
	if(xhr.readyState==4){
		if((xhr.status==200 && xhr.status<300) || xhr.status==304){
			console.log(xhr.responseText);
		} else {
			console.log("請求失敗，響應碼：" + xhr.status)
		}
	}
}