保持对代码的热爱并保存怀疑态度
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><input type="text" name="" id="tet1"><input type="text" name="" id="tet2"><input type="button" name="" id="btn"></body><script>var tet1=document.getElementById("tet1");var tet2=document.getElementById("tet2");var btn=document.getElementById("btn");btn.onclick=function(){//为了测试封装的能不能用san({url:"ceshi.php",success:function(res){console.log(res);},data:{use:tet1.value,pos:tet2.value}})}function san(ops){//es6解构赋值，接收的是一个对象，es6新语法见首页var{url,data={}, //传向后端的数据success=function(){}, //成功执行error, //异常type="get", //默认请求方式sign=true, //是否异步timeout=1000 //超时，默认值}=opsvar str=""; //定义一个空字符for(var i in data){str+=`${i}=${data[i]}&`; //因为get请求的是拼接在浏览器地址，故这里做拼接 格式：字段名=字段值&}url=url+"?"+str+"dihjf="+Date.now();//拼接到浏览器数据，get和jsonp都是用url向后端传数据的，"dihjf="+Date.now()解决缓存问题setTimeout(() => {error && error(timeout); //调用延时器是为了报请求超时后清空error = null; //清空原来的状态success = null;//清空原来的状态}, timeout);if(type!=="jsonp"){//因为json和get，post的方法不一样，加判断var xhr=new XMLHttpRequest(); //开启ajaxxhr.open(type,url); if(type==="get"){//因为get和post的参数放的位置不一样，所以加判断xhr.send(); }else{xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send(str);}xhr.onload=function(){if(xhr.status===200){//200成功执行success && success(xhr.responseText);//接收数据error = null; //清空error和succesuccess = null;}else{error && error(xhr.status); //报异常的代码error = null;success = null;}}return;}var script=document.createElement("script"); //jsonp的格式,创建scriptscript.src=url; //用url传递参数document.body.appendChild(script); //放到网页中window[data[]]=function(){//全局的函数，为了上面能调用的到，因为是两个单独的函数success && success(res); //成功后输出error = null; success = null;}}</script></html>
