原生js请求http接口

原生js请求http接口<script> //obj:{method:”get”,url:””,data:{}}; functionhttpRequest(obj,successfun,errFun){ varxmlHttp=null; //创建XMLHttpRequest对象,老版本的InternetExplorer(IE5和IE6)使用ActiveX对象:xmlht…

大家好,又见面了,我是你们的朋友全栈君。

<script>
	//obj :{method:"get",url:"",data:{}};
	function httpRequest(obj,successfun,errFun){ 
   
		var xmlHttp = null;
		//创建 XMLHttpRequest 对象,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
		if(window.XMLHttpRequest){ 
   
			//code for all new browsers
			xmlHttp = new XMLHttpRequest;
		}else if(window.ActiveXObject){ 
   
			//code for IE5 and IE6
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//判断是否支持请求
		if(xmlHttp == null){ 
   
			alert("浏览器不支持xmlHttp");
			return;
		}
		//请求方式, 转换为大写
		var httpMethod = (obj.method || "Get").toUpperCase();
		//数据类型
		var httpDataType = obj.dataType||'json';
		//url
		var httpUrl = obj.url || '';
		//异步请求
		var async = true;
		//post请求时参数处理
		if(httpMethod=="POST"){ 
   
			//请求体中的参数 post请求参数格式为:param1=test&param2=test2
			var data = obj.data || { 
   };
			var requestData = '';
			for(var key in data){ 
   
				requestData = requestData + key + "=" + data[key] + "&";
			}
			if(requestData == ''){ 
   
				requestData = '';
			}else{ 
   
				requestData = requestData.subString(0,requestData.length - 1);
			}
			console.log(requestData);
		}
		//onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码
		xmlHttp.onreadystatechange = function(){ 
   
			//complete
			if(xmlHttp.readyState == 4){ 
   
				if(xmlHttp.status == 200){ 
   
					//请求成功执行的回调函数
					successfun(xmlHttp.responseText);
				}else{ 
   
					//请求失败的回调函数
					errFun;
				}
			}
		}
		//请求接口
		if(httpMethod == 'GET'){ 
   
			xmlHttp.open("GET",httpUrl,async);
			xmlHttp.send(null);
		}else if(httpMethod == "POST"){ 
   
			xmlHttp.open("POST",httpUrl,async);
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xmlHttp.send(requestData);
		}
	}
</script>
/** 测试代码 */
<script>
httpRequest({ 
   
	method:"post",
	url:"",//请求的url地址
	data:{ 
   
		param1:''
	}
},function(res){ 
   
	console.log(res);
},function(){ 
   
	console.log("请求失败");
});
</script>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/142580.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 查看linux执行的命令记录_shell 调用history

    查看linux执行的命令记录_shell 调用history前言我们每次敲打linux命令的时候,有时候想用之前用过的命令,一般情况下,我们都会按↑↓箭头来寻找历史的命令记录,那如果我想用1天前执行的某条命令,难道还要按↑100次?显示这样是不现实的,我们可

    2022年7月30日
    5
  • 魔兽世界私服架设_魔兽大服务器合并列表

    魔兽世界私服架设_魔兽大服务器合并列表都说魔兽世界是最经典的网游,可惜我沉迷于程序的世界,都没有机会去体会一下!正好看了别人一篇blog,写着怎么架设魔兽世界,想想我就自己动手架一个看看了!等弄完之后,发现,那个服务器是2.3的客户端吧,好像!现在都3.13了,根本没用,后来到去sf.net找了一下,用svn把代码down下来,都很老了。后来啃了一点英文,才发现,现在源码管理已经迁移到git上面了。题外话,这个就是linux之

    2022年10月6日
    4
  • eclipse调试debug技巧_eclipse退出debug模式

    eclipse调试debug技巧_eclipse退出debug模式Eclipse中的debug模式使用指Debug模式是在eclipse的使用中非常常见的对程序进行debug的方式,通过debug模式我们可以更加方便快捷的定位问题出现的位置,并且找到原因进行修改.但是很多小白同学对debug模式的使用方式还不是很清楚,那么我这边会带着大家去了解一下eclipse的debug模式的使用; Debug模式的启动方式 在eclipse中,我们运行…

    2022年10月16日
    2
  • 深入浅出TCP三次握手 (多图详解)[通俗易懂]

    深入浅出TCP三次握手 (多图详解)[通俗易懂]文章目录前言1、TCP是什么?2、TCP首部格式3、TCP的连接建立4、三次握手图文详解5、三次握手文字总结5、是否可以使用“两报文握手”建立连接?6、两次握手文字总结前言TCP三次握手和四次挥手是面试题的热门考点,它们分别对应TCP的连接和释放过程,今天我们先来认识一下TCP三次握手过程,以及是否可以使用“两报文握手”建立连接?。1、TCP是什么?TCP是面向连接的协议,它基于运输连接来传送TCP报文段,TCP运输连接的建立和释放,是每一次面向连接的通信中必不可少的过程。TCP运输连接有以下

    2022年10月4日
    4
  • 软件测试缺陷报告内容_软件测试缺陷分析

    软件测试缺陷报告内容_软件测试缺陷分析1软件缺陷缺陷是一种泛称,它可以指功能的错误,也可以指性能低下,易用性差等 并不是所有的测试人员都能提交被开发认可的缺陷,也不是测试人员在任何时候都能提交被开发认可的缺陷2什么是软件缺陷软件未达到产品说明书标准的功能 软件出现了产品说明书指明不会出现的错误 软件功能超出产品说明书指明范围 软件未达到产品说明书虽未指出但应达到的目标 软件测试员认为软件难以理解,不易使用,运行速度缓慢,或者最终用户认为不好3缺陷产生的原因4发现缺陷用户体验不够好 界面上有明显的错误信

    2022年9月17日
    6
  • charles乱码怎么解决_微信抓包乱码

    charles乱码怎么解决_微信抓包乱码前言当使用Charles抓包时,发现数据都是乱码,这时需要安装证书解决办法1.点击charles窗口,点击左上角Help->SSLProxying→InstallCharles

    2022年8月6日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号