原生js实现http请求(一)
有时页面用到请求,但又不想引入jquery或者其他网络请求,增加代码冗余,增加对代码简便化,那不使用ajax情况下,可以直接使用原生js进行封装函数。原生的js通过XMLHttpRequest 对象进行的的。具体可查阅W3school的XMLHttpRequest 对象。
1、封装可供请求调用的函数
function httpRequest(paramObj,fun,errFun) {
var xmlhttp = null;
/*创建XMLHttpRequest对象,
*老版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:new ActiveXObject("Microsoft.XMLHTTP")
* */
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/*判断是否支持请求*/
if(xmlhttp == null) {
alert('你的浏览器不支持XMLHttp');
return;
}
/*请求方式,并且转换为大写*/
var httpType = (paramObj.type || 'GET').toUpperCase();
/*数据类型*/
var dataType = paramObj.dataType || 'json';
/*请求接口*/
var httpUrl = paramObj.httpUrl || '';
/*是否异步请求*/
var async = paramObj.async || true;
/*请求参数--post请求参数格式为:foo=bar&lorem=ipsum*/
var paramData = paramObj.data || [];
var requestData = '';
for(var name in paramData) {
requestData += name + '='+ paramData[name] + '&';
}
requestData = requestData == '' ? '' : requestData.substring(0,requestData.length - 1);
console.log(requestData)
/*请求接收*/
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
/*成功回调函数*/
fun(xmlhttp.responseText);
}else{
/*失败回调函数*/
errFun();
}
}
/*接口连接,先判断连接类型是post还是get*/
if(httpType == 'GET') {
xmlhttp.open("GET",httpUrl,async);
xmlhttp.send(null);
}else if(httpType == 'POST'){
xmlhttp.open("POST",httpUrl,async);
//发送合适的请求头信息
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(requestData);
}
}
2、调用方法
/*请求参数*/
var paramObj = {
httpUrl : 'https://mp.csdn.net',
type : 'get',
data : {
name : 'xuexi',
sex : '学习'
}
}
/*请求调用*/
httpRequest(paramObj,function(respondDada) {
//这里编写成功的回调函数
console.log(respondDada)
},function() {
alert('网络错误')
});
总结:在简单的Html页面不需要引入额外的类库时,可以使用原生请求,或者是引入的库,不满足自己的需求时,可以使用原生来达到自己的需要,掌握原生是根本,其他都是变种;