js中XMLHttpRequest对象实现GET、POST异步传输

              1
            /*
              2
             * 统一XHR接口

              3
            */
              4
            function
             createXHR() {

              5
            //
             IE7+,Firefox, Opera, Chrome ,Safari
              6
            if(typeof XMLHttpRequest != "undefined") {
  7returnnew XMLHttpRequest();
  8    }
  9// IE6- 10elseif(typeof ActiveXObject != "undefined"){
 11if(typeof arguments.callee.activeXString != "string") {
 12var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXMLHttp"],
 13            i, len;
 14for(i = 0, len = versions.length; i < len; i++) {
 15try{
 16new ActiveXObject(versions[i]);
 17                     arguments.callee.activeXString = versions[i];
 18break;
 19                 }catch(ex) {
 20                     alert("请升级浏览器版本");
 21                }
 22            }
 23        }
 24return arguments.callee.activeXString;        
 25     }else {
 26thrownew Error("XHR对象不可用");
 27    }
 28}
 29 30var xhr = createXHR();
 31// 定义xhr对象的请求响应事件 32 xhr.onreadystatechange = function() {
 33switch(xhr.readyState) {
 34case 0 :
 35//alert("请求未初始化"); 36break; 
 37case 1 :
 38//alert("请求启动，尚未发送"); 39break;
 40case 2 :
 41//alert("请求发送，尚未得到响应"); 42break;
 43case 3 : 
 44//alert("请求开始响应，收到部分数据"); 45break;
 46case 4 :
 47             alert("请求响应完成得到全部数据");
 48if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
 49var    data = xhr.responseText;
 50                alert(data);
 51             }else {
 52                 alert("Request was unsuccessful : " + xhr.status + " " + xhr.statusText);
 53            }
 54break;
 55    }
 56};
 57/* 58// get请求
 59// get请求添加查询参数
 60function urlParam(url, name, value) {
 61    url += (url.indexOf(‘?‘) == -1 ) ? ‘?‘ : ‘&‘ ; 
 62    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
 63    return url;
 64}
 65 66// get请求
 67url = urlParam("example.php","name","ccb");
 68url = urlParam(url,"pass","123");
 69xhr.open("get", url ,true);
 70xhr.send(null);*/ 71 72// post请求 73// 格式化post 传递的数据 74function postDataFormat(obj){
 75if(typeof obj != "object" ) {
 76         alert("输入的参数必须是对象");
 77return;
 78    }
 79 80// 支持有FormData的浏览器（Firefox 4+ , Safari 5+, Chrome和Android 3+版的Webkit） 81if(typeof FormData == "function") {
 82var data = new FormData();
 83for(var attr in obj) {
 84            data.append(attr,obj[attr]);
 85        }
 86return data;
 87     }else {
 88// 不支持FormData的浏览器的处理  89var arr = new Array();
 90var i = 0;
 91for(var attr in obj) {
 92             arr[i] = encodeURIComponent(attr) + "=" + encodeURIComponent(obj[attr]);
 93             i++;
 94        }
 95return arr.join("&");
 96    }
 97}
 98 99// post请求100var data = {name : "ccb" , pass : "123"};
101 xhr.open("post", "example.php", true);
102// 不支持FormData的浏览器的处理 103if(typeof FormData == "undefined") {
104     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
105}
106 xhr.send(postDataFormat(data));