封装好的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

相关文章
|
2月前
|
XML 前端开发 JavaScript
|
15天前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
33 0
|
3月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
75 22
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
45 18
|
3月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
102 4
|
3月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
154 1
|
4月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
69 10
|
4月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
40 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
4月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
4月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
59 4