原生JS实现$.ajax
1 function ajax(obj){ 2 obj=obj||{}; 3 obj.type=(obj.type||'GET').toUpperCase(); 4 obj.dataType=obj.dataType||'json'; 5 var params=formatParams(obj.data);//参数格式化 6 7 //step1:兼容性创建对象 8 if(window.XMLHttpRequest){ 9 var xhr=new XMLHttpRequest(); 10 } 11 else{ 12 var xhr=new ActiveXObject('Microsoft.XMLHTTP'); 13 } 14 15 //step4: 接收 16 xhr.onreadystatechange=function(){ 17 if(xhr.readtState==4){ 18 if(xhr.state>=200 && xhr.status<300){ 19 obj.success&&obj.success(xhr.responseText,xhr.responseXML); 20 } 21 else{ 22 obj.error&&obj.error(xhr.status); 23 } 24 } 25 } 26 27 //step2 step3:连接 和 发送 28 if(obj.type=='GET'){ 29 xhr.open('GET',obj.url+'?'+params,true); 30 xhr.send(null); 31 } 32 else if(obj.type=='POST'){ 33 xhr.open('POST',obj.url,true); 34 //设置请求头,以表单形式提交数据 35 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 36 xhr.send(params); 37 } 38 39 40 //辅助函数,格式化参数 41 function formatParams(data){ 42 var arr=[]; 43 for(var name in data){ 44 arr.push(encodeURICompontent(name)+"="+encodeURICompontent(data[name])); 45 } 46 //设置随机数,防止缓存 47 arr.push("t="+Math.random()); 48 return arr.join("&"); 49 } 50 51 }
使用:
1 ajax({ 2 url:"www.baidu.com", 3 type:"GET", 4 dataType:"json", 5 data:{a:"123",b:"456"}, 6 success:function(response.xml){//todo something}, 7 error:function(status){//todo something} 8 })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现