这是一个纯js向后台进行post请求的前端实现,未考虑跨域的问题。
1.创建对象,并兼容各种浏览器
2.请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够,于是就写了第二个方法。至于怎么传递参数到服务器,我原来的做法是拼接在请求地址后面的。其实也可以
XMLHttpReq.send(null);放在这里,就是null替换成参数,比如 user=bill&pc=hw .
3.请求数据,成功后就会执行回调函数,回调函数里会收到服务器返回的数据,在回调函数里可以对数据进行处理,完成自己的要求。
//1.创建对象 var XMLHttpReq; var _XMLHttpReq; function createXMLHttpRequest() { try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP } catch (E) { try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP } catch (E) { XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器,直接创建XMLHTTP对象 } } _XMLHttpReq=XMLHttpReq; }
//向服务器进行请求,并执行调用回调函数,两种方法 //方法1 固定的回调处理 主要用在同步场景 function sendAjaxRequest(url,Sys) { createXMLHttpRequest(); //创建XMLHttpRequest对象 XMLHttpReq.open("post", url, Sys); XMLHttpReq.onreadystatechange = processResponse; //指定响应函数 XMLHttpReq.send(null); } //方法2 灵活的回调处理 同步异步皆可 function sendAjaxRequestFunc(url, Sys, func) { createXMLHttpRequest(); //创建XMLHttpRequest对象 XMLHttpReq.open("post", url, Sys); XMLHttpReq.onreadystatechange =func; //指定响应函数 XMLHttpReq.send(null); }
//固定的回调 var _textReponse; function processResponse() { if (XMLHttpReq.readyState == 4) { if (XMLHttpReq.status == 200) { _textReponse = XMLHttpReq.responseText; } } }
//调用1 得到结果 _textReponse 在进行处理 sendAjaxRequest('xxx/xxx', false); //调用2 sendAjaxRequestFunc('xx/xx', false, doSth); function doSth(){ if (_XMLHttpReq.readyState == 4) { if (_XMLHttpReq.status == 200) { //得到结果进行处理 var data =_XMLHttpReq.responseText; } } }