ajax传递多个参数无响应

有很多框架已经将 ajax 封装，需要的时候只需要调用就好，比如 jQuery 是最常用的。我们为什么还需要学习 ajax 的封装呢？首先加强我们对ajax的认识，其次如果只是因为ajax请求需要引入框架，我们可以自己封装一个，这样就不需要引入多余的框架了。

一、封装的注意点

封装是为了把相同的部分都实现公用，节省资源，提高代码复用性，工作效率也高，所以需要把不同的参数事件类型等通过调用的时候传入，需要注意点有：

1.1、传参

发送 ajax 请求时，主要参数有：

请求url

请求类型

请求参数

成功回调

失败回调

超时时间

以上六个参数必须设置成动态传入的，便于控制任意 ajax 请求。超时时间可以统一设置，如果作为传参可以更方便地控制任意一个请求超时。

1.2、请求类型分别处理

请求类型有 get 和 post 两种，get类型传值的时候，数据跟在url地址后，post传值时在请求体内携带，还需设置请求数据类型。所以需要判断分别处理。

if(type=='GET'){  xhr.open('GET',url+'?'+strData,true)  shr.nd()  }el{  xhr.open('POST',url,true)  xhr.tRequestHeader('content-type','application/x-www-form-url为什么会困encoded')  xhr.nd(strD设置光驱启动ata)  }

1.3、请求超时处理

网络服务异常或者接口异常的时候，请求发送出去没有响应，页面也不会做出任何反应，需要全局加一个超时处理，超出时间还没有返回时，自动结束请求，返回异常。

使用语法如下：

//设置时间为2s  xhr.timeout=2000;  //超时回调  xhr.ontimeout=function(){  console.log('网络异常，稍后重试')  }

1.4、错误处理

网络中断，请求无法发送到服务器时，需要对请求失败进行处理。使用onerror关于中秋节的诗歌事件处理。

使用语法如下：

xhr.onerror=function(){  console.log("网络异常，请检查网络")  }

二、丁蟹语录封装 ajax 代码

根据ajax的请求流程，封装代码如下：便于以后使用，建议收藏。

functionajax(option){  //method,url,data,timeout,success,error  varxhr;  varstr=data2str(option.data);  if(window.XMLHttpRequest){  xhr=newXMLHttpRequest();  }el{  xhr=newActiveXObject("Microsoft.XMLHTTP");  }  if(option.type.toLowerCa()==='post'){  xhr.open(option.type,option.url,true);  xhr.tRequest生物必修一思维导图Header("Content-type","application/x-www-form-urlencoded");  xhr.nd(str);  }elif(option.type.toLowerCa()==='get'){  xhr.open(option.type,option.url+'?'+str,true);  xhr.nd();  }  xhr.onreadystatechange=function(){  if(xhr.readyState===4){  clearTimeout(timer);  if(xhr.status>=200&&xhr.status<300||xhr===304){  option.success(xhr);  }el{  option.error(xhr);  }  }  };  if(option.timeout){  vartimer=tTimeout(function(){  xhr.abort();  clearTimeout(timer);  },option.timeout)  }  }  //将对象转化成用于传输的字符串  functiondata2str(data){  varres=[];  data.t=newDate().getTime();  for(varkeyindata){  res.push(encodeURIComponent(key)+'='+encodeURIComponent(data[key]));  }  returnres.join('&');  }

使用的时候调用代码如下：

ajax({  method:'GET',  url:'1.txt',  data:{  //请求数据  },  timeout:2000,  success:(res)=>{  console.log('成功返回',res.respon)  },  error:err=>{  console.log('错误信息',err)  }  })