基于JS原生封装POST、GET请求，解决onreadystatechange=2不执行问题

// 常用工具函数
var tools = {
    ajaxGet: function (url, query, succCb, failCb, isJson) {
      
        if (query) {
            var parms = tools.formatParams(query);
            url += '?' + parms;
          
        }
        var ajax = new XMLHttpRequest();

        var getResult = function () {
            if (ajax.readyState === 4) {
                if (ajax.status === 200) {
                   
                    if (isJson === undefined) {
                        isJson = true;
                    }
                    var res = isJson ? JSON.parse(ajax.responseText == "" ? '{}' : ajax.responseText) : ajax.responseText;
                    succCb && succCb(res);
                } else {
                   
                    failCb && failCb();
                }

            }
        }
        ajax.open("GET", url, true);

        ajax.send(null);

        if(ajax.onreadystatechange==4 || ajax.onload==4)
        {
            getResult();
        }else{
            ajax.onreadystatechange=getResult;
        }

    },

    ajaxPost: function (url, data, succCb, failCb, isJson) {

        var formData = new FormData();
        for (var i in data) {
            formData.append(i, data[i]);
        }
      
        var xhr = null;
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");

        }

        var postResult = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                  
                    isJson = isJson === undefined ? true : isJson;
                    succCb && succCb(isJson ? JSON.parse(xhr.responseText) : xhr.responseText);
                }
            }
        }

        xhr.open("post", url, true);

        xhr.send(formData);

        xhr.onreadystatechange=postResult;
    },

    formatParams: function (data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + "=" +         encodeURIComponent(data[name]));
        }
        arr.push(("v=" + Math.random()).replace(".", ""));
        return arr.join("&");
    }


}

使用示例：

            <div class="tl">
							   <h1>登录</h1>
						</div>
						<div class="user">
							<input type="text" id="user_name" placeholder="| &nbsp;&nbsp;&nbsp;请输入您的用户名" required>
						</div>
						<div class="psd">
							<input type="password" id="user_password"  placeholder="| &nbsp;&nbsp;&nbsp; 请输入您的密码" required>
						</div>
						<div class="lg">
							<button type="submit" onclick="return userLogin()">登录</button>
						</div>

function userLogin() {
			var userName=document.getElementById("user_name").value;
			var userPassword=document.getElementById("user_password").value;
			var data={
				"user_name": userName,
				"password":userPassword
			}

			tools.ajaxPost(userApi.userLogin,data,function(res){
				if (res.code == 0) {
					localStorage.setItem("userId",res.userId);
					window.location.href="/user/index.html";
				} else {
					alert(res.msg);
				}
			})

			return false;

		}

注意：return false 是关键！！！

XMLHttpRequest返回四次，执行：onreadystatechange

如果没有return false 程序将执行 onreadystatechange=2不再执行，因为页面会被刷新

readyState的值及解释：

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

readyState==4 && status==200的解释：请求完成并且成功返回

！！！ 注意：

据说onreadystatechange在IE、Google、火狐、360不同的浏览器内核下响应不一样，暂时未遇到该问题