美文网首页
原生js实现ajax

原生js实现ajax

作者: 609865d31336 | 来源:发表于2020-02-24 15:28 被阅读0次
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 data=convertData(ajaxData.data);

  var xhr = createxmlHttpRequest();

  ajaxData.url= ajaxData.type.toLowerCase()==='get'?ajaxData.url+"?"+data:ajaxData.url

  xhr.responseType=ajaxData.dataType;

  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async); 

  xhr.setRequestHeader("Content-Type",ajaxData.contentType); 

  if(ajaxData.type.toLowerCase()==='get'){

  xhr.send(data); 

  }else{

  xhr.send();

  }

//请求状态码判断是否成功

  xhr.onreadystatechange = function() { 

    if (xhr.readyState == 4) { 

      if(xhr.status == 200){

        ajaxData.success(xhr.response)

      }else{

        ajaxData.error()

      } 

    }

  } 

}

//创建XmlHttpRequest对象

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;

  }

}

相关文章

  • 原生js实现Ajax

    原生js实现Ajax方法:var Ajax={get: function(url, fn) { var xhr =...

  • 原生js实现ajax及get post方法

    @拭目以待:首发于原生js实现ajax及get post方法 ajax原生实现,含 post与get方法。原码如下...

  • 前端基础知识-示例代码

    1、ajax 2、jsonp a、原生实现方式 b、jquery ajax: c、vue.js d、npm包jso...

  • js原生的ajax

    //下面是原生的js实现的ajax function myajax(){ var xmlhttp; if (win...

  • ajax和fetch的区别

    一、Ajax Ajax的本质是使用XMLHttpRequest对象来请求数据,下面简单贴下原生js实现: 二、fe...

  • 原生JS AJAX实现

    AJAX说明 IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用:new XMLHttpRequest(...

  • 原生js实现Ajax

    如果要用原生的JS实现Ajax怎么整呢,让我们一起来整一个试试。 方法: /** 详细说明: 1.Ajax步骤:1...

  • 原生JS实现AJAX

    原生JS实现AJAX代码,代码如下 如果需要ajax运行方法完成后调用结果的话 需要使用回调函数 或者 promi...

  • 原生js实现ajax

  • 原生JS实现Ajax

    原生Js的实现 事件 鼠标事件 *e.stoppropagation();//阻止事件冒泡 键盘事件 事件对象(e...

网友评论

      本文标题:原生js实现ajax

      本文链接:https://www.haomeiwen.com/subject/jmevqhtx.html