ajax传递多个参数无响应(ajax传值八个传值方法)

有很多框架已经将ajax封装,需要的时候只需要调用就好,比如jquery是最常用的。我们为什么还需要学习ajax的封装呢?首先加强我们对ajax的认识,其次如果只是因为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.send()
}else{
 xhr.open(\'POST\',url,true)
 xhr.setRequestHeader(\'content-type\',\'application/x-www-form-urlencoded\')
 xhr.send( strData )
}

1.3、请求超时处理

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

使用语法如下:

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

1.4、错误处理

网络中断,请求无法发送到服务器时,需要对请求失败进行处理。使用onerror事件处理。

使用语法如下:

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

二、封装 ajax 代码

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

function ajax(option) {
 // method, url, data, timeout, success, error
 var xhr;
 var str = data2str(option.data);
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 }else {
  xhr = new ActiveXObject(\"Microsoft.XMLHTTP\");
 }
 if (option.type.toLowerCase() === \'post\') {
  xhr.open(option.type, option.url, true);
   xhr.setRequestHeader(\"Content-type\", \"application/x-www-form-urlencoded\");
   xhr.send(str);
  } else if (option.type.toLowerCase() === \'get\') {
   xhr.open(option.type, option.url + \'?\' + str, true);
   xhr.send();
  }
 xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
   clearTimeout(timer);
   if (xhr.status >= 200 && xhr.status < 300 || xhr === 304) {
    option.success(xhr);
   }else {
    option.error(xhr);
   }
  }
 };
 if (option.timeout) {
  var timer = setTimeout(function () {
   xhr.abort();
   clearTimeout(timer);
  }, option.timeout)
 }
}
// 将对象转化成用于传输的字符串
function data2str(data) {
 var res = [];
 data.t = new Date().getTime();
 for (var key in data) {
  res.push(encodeURIComponent(key) + \'=\' + encodeURIComponent(data[key]));
 }
 return res.join(\'&\');
}

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

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

本文来自投稿,不代表来拓客立场,如若转载,请注明出处:https://www.laituoke.com/ltk/7312.html