原生js请求http接口
2023-06-13 09:11:44 时间
大家好,又见面了,我是你们的朋友全栈君。
<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¶m2=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.cn/142580.html原文链接:https://javaforall.cn
相关文章
- html js 全局 变量,JS定义全局变量
- Js排序算法_js 排序算法
- 【愚公系列】2022年09月 微信小程序-three.js绘制多维旋转正方体
- Node.js相比于前端js
- JavaScript基本知识点——带你逐步解开JS的神秘面纱
- js 数组去除重复数据-当WPS开始像支持VBA一样支持JS语言时,微软又该何去何从?
- 【JS 逆向百例】猿人学系列 web 比赛第二题:js 混淆 - 动态 cookie,详细剖析
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- 开心档-软件开发入门之Vue.js 响应接口
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- 使用html+css+js实现魔性的舞蹈详解编程语言
- js调试工具console.log()方法查看js代码的执行情况详解编程语言
- JS正则表达式匹配货币数字
- JS事件委托(事件代理)
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- 数据JS技术实现实时获取Oracle数据(js实时获取oracle)
- JS实时链接Oracle让数据库访问更便捷(js实时连接oracle)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- JS在Oracle中的应用(js如何oracle)
- 从前端JS里请求Redis资源,搭建高性能应用(前端js请求redis)
- CSS和JS标签style属性对照表(方便js开发的朋友)
- 远离JS灾难css灾难之js私有函数和css选择器作为容器
- jQuery控制图片的hover效果(smartRollover.js)
- js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
- js实现屏蔽默认快捷键调用自定义事件示例
- js实现倒计时(距离结束还有)示例代码
- js使FORM表单的所有元素不可编辑的示例代码
- 使用js的replace()方法查找字符示例代码
- 使用js简单实现了tree树菜单
- js单词形式的运算符
- php+js实现异步图片上传实例分享
- 我用的一些Node.js开发工具、开发包、框架等总结