创建异步对象XHR的兼容写法、get、post上传数据的方式

兼容ie7以下，创建异步对象的函数

    function creatXHR(){
			if(typeof XMLHttpRequest != "undefined"){
				return new XMLHttpRequest();
			}else if(typeof ActiveXObject != "undefined"){
				var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i;
				for(i=0, i < versions.length;i++){
					try{
						new ActiveXObject(versions[i]);
						arguments.callee.activeXString = versions[i];
						break;
					} catch(err){
						//。。。none
					}
				}
				return new ActiveXObject(arguments.callee.activeXString);
			}else{
				throw new Error("No XHR object available.");
			}

		}


        var xhr = creatXHR();

上面出现的arguments.callee.activeXString = versions[i];
实际上代表creatXHR.activeXString = versions[i];

get

                //get 请求时给url拼接数据
		function addURLParam(url,name,value){
			url += (url.indexOf("?") == -1 ? "?" : "&");
			url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
			return url;
		}

post

    //请求头的写法
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    //post 表单可以这么写
    xhr.send(serialize(document.querySelector(“form”));

在XMLHttpRequest 2级中

    //利用FormData
    var data = new FormData();
    //可以向data添加数据
    data.append("key","value");
    //send直接send
    xhr.send(data);

进度事件

loadstart
progress
error
abort
load
loadend

    xhr.onload = function(){
        //...handle
    }

progress事件

1.    progress事件的event对象有三个额外属性：lengthComputable（布尔值，表示进度是否可用）、position（已经接受的字节数）和totalSize（根据响应头预期的字节数）
2.    该事件在数据传输期间会间接性的触发
3.    放在open事件之前比较好

    xhr.onprogress = function(event){
           //..dom
           if(event.lengthComputable){
                dom.innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes";
           }
    }