原生ajax实现get和post请求

执行步骤

1.1 xhr.open(method,url,isAsync); 注：这行代码只是在预备发送请求，而不是真正的发送请求。url可以使用相对或者绝对路径。 1.2 xhr.send(data); 注：即使不发送data,也要填写null,因为兼容性问题某些浏览器可能报错。 1.3 xhr.onreadystatuschange(); readystatus一共可以取得以下值： 0：未初始化，没有调用open() 1: 启动。调用open() 2: 发送。 调用send(),无返回的响应。 3: 接受。 接受返回的部分数据。 4: 完成。数据接收完成可以使用。 注意：该方法必须在xhr.open()之前调用，以保证正确运行。

代码实现

2.1 这里的代码考虑到IE低版本不支持XMLHttpRequest，如果不需要支持IE10以及以下版本就可以不用这么麻烦，直接使用XMLHttpRequest就可以了 。 2.2 另外注意open() 和setRequestHeader()以及send()三者的先后顺序。 2.3 至于get请求就容易多了，修改一下xhr.open()以及xhr.setRequestHeader()就可以了，其他的没什么变化。

function createXHR() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof arguments.callee.activeXString !== "string") { var vers= ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],i,len; for (i=0,len=vers.length;i<vers;i++) { try { new ActiveXObject(vers[i]); arguments.callee.activeXString = vers[i]; break; }catch(err){ console.log(err); } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available"); } } function submitData() { var xhr = createXHR(); xhr.onreadystatchange = function () { if (xhr.readyStatus === 4){ if ((xhr.status >= 200 && xhr.status<300) || xhr.status === 304 ){ console.log(xhr.statusText); } else { console.log("request is failed:"+xhr.status); } } } xhr.open("post", url, true); xhr.timeout = 1000; //设置超时时间 xhr.ontimeout = function () { console.log("Request is timeout"); } xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var form =new FormData(); xhr.send(JSON.stringify(form)); } // 注意 open() 和setRequestHeader()以及send()三者的先后顺序。