在使用 jQuery 开发了很多网站之后，对原生的 JS 是越来与生疏了，但是对于任何一门语言来说，框架只会让事情事半功倍，但归根结底，还是语言原生的特性是根本。
<form id="register" method="POST" action="register.php">
<label>邮 箱：<input type="text" id="email" placeholder="请输入邮箱地址"></label>
<label>密 码：<input type="password" id="password" placeholder="请输入密码"></label>
<input type="submit" value="提交">
</form>
除了表单页面之外，还需要有一个后端页面register.php来负责验证数据的合法性以及注册过程，这里是后端页面，就不给出具体代码了。
function creatXHR(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert(‘此浏览器不支持 XHR ！’);
}
}
使用此代码来创建一个创建兼容XHR对象的函数，第二行先判断window是否有XMLHttpRequest这个属性，如果有则证明是支持W3C标准的XHR对象，否则就是IE6了（已经可以不用考虑其他浏览器了），使用微软的方式来创建XHR对象，所幸的是其他浏览器的实现和IE早期的实现在内部是兼容的，W3C也兼容（其实W3C的很多标准都是采纳于各个浏览器已经实现的事实标准）。
function validateData(obj,method,url,data){
var xhr = creatXHR(),
iscancel = setTimeout(function(){xhr.abort();console.log("超时取消！");},5000); // 设定超时取消
xhr.onreadystatechange = function() { //绑定事件
if (xhr.readyState == 4 && xhr.status ==200){ //此时数据可用
var res = (window.JSON)?(JSON.parse(xhr.responseText)):(eval("("+xhr.responseText+")"));//解析 json字符串
obj.nextSibling.innerHTML = res.msg;
if (res.code == 0 || res.code == 2) {
obj.nextSibling.style.color = 'red';
} else {
obj.nextSibling.style.color = '#5B636A';
};
clearTimeout(iscancel);//如果响应成功，取消定时函数
}
}
//检测 Method 方法，GET POST
if (method.toLowerCase() === "get") {
xhr.open("GET",modiUrl(url,data),true);
xhr.send(null);
} else if (method.toLowerCase() === "post"){
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(serialize(data));
};
}
然后来详细阐述一下这个xhr对象的相关内容(获取输入数据就是很正常的获取数据的过程,这里不多说了)。
xhr.open("GET","register.php?"+encodeURIComponent('email')+"="+ encodeURIComponent(email),true);
这里使用了 get 方法，异步获取register.php 这个url的数据（url必须同域同端口同协议，否则报安全错误，可以绝对路径或者相对路径）。但是当调用open() 方法的时候并不会真正的发送请求，而是启动一个请求以备发送。而要发送请求，就必须调用send()方法才行。例如上面的代码所示，即：
这里的send()必须接受一个参数，即：要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null ，因为不传入的话，有些浏览器会报错。
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status ==200){
alert(xhr.responseText);
}
}
在onreadystatechange事件每次触发时，检测readyState的值，若为 4 ，且status 为200（http状态，前面已说明）时才可以使用此数据。
var iscancel = setTimeout(function(){xhr.abort();},5000);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status ==200){
alert(xhr.responseText);
clearTimeout(iscancel);
}
}
即可在超过5秒钟未收到响应，由于超时而取消本次请求。
xhr.open("POST","register.php,true);
而第二步就是将发送的数据通过 send() 方法发送出去（前面已经讲过）。但是服务器端对于提交的web表单必须经过处理，因为对于POST提交的非表单数据，其处理方式是不同的，也就是后端程序必须要读取前端发过来的原始表单数据，并从中解析出有用的部分，因此我们必须通过XHR模拟表单数据的提交，这也就用到了自定义头部信息。为了保证兼容性，使自定义头部发送成功，必须在open() 方法之后，在 send() 方法之前，设定自定义头部（如果不设定自定义头部的话后端是否可以获取提交的数据呢，答案是可以，但是就不能使用$_POST这种超级全局变量，而只能通过$HTTP_RAW_POST_DATA来获取了，此处基于PHP而言）。
xhr.open("POST","register.php,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
自定义头部的意思就是表单提交时的内容类型。
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status ==200){
alert(xhr.responseText);
}
}
xhr.open("POST","register.php,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
然后就是对表单数据的序列化了。其实和GET数据格式相同，即[email protected] &site=yimity.com,但是要编码。这里就不多做讨论了。
var data = "email=yimity%40gmail.com&password=123456";
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status ==200){
alert(xhr.responseText);
}
}
xhr.open("POST","register.php,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
点此查看 。