封装好的Ajax请求函数

简介: 封装好的Ajax请求函数

 

function ajax( options ){  // options是一个对象,包含请求所需的参数
  // 为ajax函数设置默认值,有些不需要传递的参数或者不需要经常改变的参数给一个  默认值,需要改变的时候再用传递进去的值覆盖默认值
  var defaults = { 
       type:'get',
       url:'',
       async:true,
       data:{},
       header:{
         'content-type':'application/x-www-form-urlencoded'
       },
       success:function(){},
       error:function(){}
  };
  // 使用用户传递的参数替换默认值参数
  Object.assign(defaults,options);  // assign方法实现浅拷贝
  // 创建xhr对象
  var xhr = new XMLHttpRequest();  // 这里没有考虑兼容性,考虑浏览器兼容性的创建过程可以看“Ajax常见面试题整理中的3”
  // 参数拼接变量
  var params = '';
  // 循环参数
  for(var attr in defaults.data){  //data里面存的是传给服务器的参数
      // 参数拼接
      params += attr + '=' + defaults.data[attr]+'&';
      // 去掉参数中的最后一个& 
      params = params.substr(0,length-1); //substr不包含右边界值
  };
  // 参数拼接完了就需要判断一下请求方式,从而决定传参的形式
  if(defaults.type == 'get'){
       // 将参数拼接在url地址的后面
       defaults.url += '?'+params ;
  };
  // 配置ajax请求
  xhr.open( defaults.type,defaults.url,defaults.aysnc );
  // 如果请求方式为post  
  if( defaults.type == 'post'){
       // 设置请求头
       xhr.setRequestHeader('Content- Type',defaults.header['Content-Type'] );
       // 如果想服务器端传递的参数类型为json
       if( defaults.header['Content-Type']=='application/json'){
           // 将json对象转换成json字符串
           xhr.send(JSON.stringify(defaults.data));
       }else{
           // 发送请求
           xhr.send('params');
    }else{
        xhr.send();
    };
    // 请求加载完成
    xhr.onload = function(){
      // 获取服务器端返回数据的类型
      var contentType = xhr.getResponseHeader('Content-Type');
      // 获取服务端返回的响应数据
      var responseText = xhr.responseText;
      // 如果服务端返回的是json数据类型
      if( contentType.includes('application/json')){
           // 将json字符串转换为json对象
           responseText = JSON.parse(responseText);
      };
      // 如果请求成功
      if(xhr.status == 200 ){
          // 调用成功回调函数,并且将服务端返回的结果传递给成功回调函数
          defaults.success(responseText,xhr);
      }else{
          // 调用失败回调函数并且将xhr对象传递给回调函数
          defaults.error(responseText,xhr);
      }
    }
    // 当网络中断时
    xhr.onerror = function(){
       // 调用失败回调函数并且将xhr对象传递给回调函数
       defaults.error( xhr );
    }
}

image.gif

相关文章
|
4月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
ajax请求中的reponseType和withCredetials分别是啥?
ajax请求中的reponseType和withCredetials分别是啥?
ajax请求中的reponseType和withCredetials分别是啥?
|
4月前
|
资源调度 前端开发 JavaScript
Vue3中如何使用axios进行Ajax请求?
Vue3中如何使用axios进行Ajax请求?
113 1
|
1月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
3月前
|
XML JSON 前端开发
|
3月前
|
前端开发 JavaScript
|
3月前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
37 0
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
29 0
|
3月前
|
XML 前端开发 JavaScript
AJAX如何向服务器发送请求?
AJAX如何向服务器发送请求?
44 0