专栏首页膨胀的面包原生js实现ajax方法

原生js实现ajax方法

由于不想多引入一个 jquery,百度了一个原生 js 实现 ajax 的方法(超简单),挺不错的,现在就分享给大家,也给大家做个参考。

首先新建一个 js 文件:

function ajax(){ 
  var ajaxData = { 
    type:arguments[0].type || "GET", 
    url:arguments[0].url || "", 
    async:arguments[0].async || "true", 
    data:arguments[0].data || null, 
    dataType:arguments[0].dataType || "text", 
    contentType:arguments[0].contentType || "application/x-www-form-urlencoded", 
    beforeSend:arguments[0].beforeSend || function(){}, 
    success:arguments[0].success || function(){}, 
    error:arguments[0].error || function(){} 
  } 
  ajaxData.beforeSend() 
  var xhr = createxmlHttpRequest();  
  xhr.responseType=ajaxData.dataType; 
  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);  
  xhr.setRequestHeader("Content-Type",ajaxData.contentType);  
  xhr.send(convertData(ajaxData.data));  
  xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4) {  
      if(xhr.status == 200){ 
        ajaxData.success(xhr.response) 
      }else{ 
        ajaxData.error() 
      }  
    } 
  }  
} 
 
function createxmlHttpRequest() {  
  if (window.ActiveXObject) {  
    return new ActiveXObject("Microsoft.XMLHTTP");  
  } else if (window.XMLHttpRequest) {  
    return new XMLHttpRequest();  
  }  
} 
 
function convertData(data){ 
  if( typeof data === 'object' ){ 
    var convertResult = "" ;  
    for(var c in data){  
      convertResult+= c + "=" + data[c] + "&";  
    }  
    convertResult=convertResult.substring(0,convertResult.length-1) 
    return convertResult; 
  }else{ 
    return data; 
  } 
} 

使用格式跟 jquery 的 ajax 差不多:

ajax({ 
  type:"POST", 
  url:"ajax.php", 
  dataType:"json", 
  data:{"val1":"abc","val2":123,"val3":"456"}, 
  beforeSend:function(){ 
    //some js code 
  }, 
  success:function(msg){ 
    console.log(msg) 
  }, 
  error:function(){ 
    console.log("error") 
  } 
}) 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 原生JS与jQuery对AJAX的实现

    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

    山河木马
  • 原生JS--Ajax

    Ajax基础: --ajax:无刷新数据读取,读取服务器上的信息 --HTTP请求方法:     --GET:用于获取数据,如浏览帖子     --POST:用...

    莫问今朝
  • 原生JS的Ajax

          非IE6浏览器:var obj = new XMLHttpReuqest();

    莫问今朝
  • 原生JS实现一个Ajax跨域请求

    Asynchronous JavaScript + XML(异步 JavaScript 和 XML), 其本身不是一种新技术,而是一个在 2005 年被 Jes...

    Dreamy.TZK
  • 原生js模仿jQuery实现对Ajax的封装

    用户1272076
  • 原生JS实现魔方效果

    越陌度阡
  • JS 原生方法原理探究(五):如何实现 instanceof?

    这是JS 原生方法原理探究系列的第五篇文章。本文会介绍如何实现 instanceof 方法。

    Chor
  • JS 原生方法原理探究(二):如何实现 Object.create?

    这是JS 原生方法原理探究系列的第二篇文章。本文会介绍如何实现 Object.create() 方法。关于这个方法的具体用法,MDN 已经描述得很清楚了,这里我...

    Chor
  • Promise实现原生JS的Ajax请求(后端使用Node.js)

    最近在学习ES6的相关知识,看完了Promise,于是打算用Promise实现一个原生JS的Ajax例子,顺便复习一下Node的相关知识。

    从入门到进错门
  • JavaWeb——AJAX异步技术实现方式与案例实战(原生的JS方式、使用JQuery方式)

    AJAX是一门很重要的技术,主要作用就是增强用户的体验。AJAX全名为:ASynchronous JavaScript And XML,异步的JavaScrip...

    Winter_world
  • JS 原生方法原理探究(十):如何手写实现 Promise/A+ 及相关方法?

    Promise 构造函数的作用是创建一个 promise 实例。对于一个 promise 实例来说,它会有几个基本的属性:status 记录 promise 的...

    Chor
  • JS 原生方法原理探究(三):如何实现 new 操作符?

    这是JS 原生方法原理探究系列的第三篇文章。本文会介绍如何模拟实现 new 操作符。关于 new 的具体用法,MDN 已经描述得很清楚了,这里我们只做简单的介绍...

    Chor
  • JS 原生方法原理探究(四):如何实现继承的几种方式?

    这是JS 原生方法原理探究系列的第四篇文章。本文会介绍如何实现 JS 中常见的几种继承方式,同时简要它们的优缺点。

    Chor
  • js原生ajax请求获取数据

    https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

    田田田
  • 原生JS实现实时钟表

    分享一个用原生JS实现的实时钟表特效,效果如下(PS:实际指针是按360度走的,截图时只截了一部分)

    越陌度阡
  • 几种js 方法实现倒计时 原

    1、用js  setInterval  实现,每间隔一秒调用一次倒计时函数,在函数里面设置为0 时,取消定时器

    tianyawhl
  • 原生js实现on和emit

    转载自:http://www.cnblogs.com/aisiqi-love/p/10594461.html

    smy
  • 原生JS实现轮播图

    越陌度阡
  • 用最简单的方法实现原生JS放大镜特效

    汤清丽

扫码关注云+社区

领取腾讯云代金券