• 原生js实现ajax


    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;
      }
    }
    用法:
    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")
      }
    })
  • 相关阅读:
    2021年欺骗式防御技术将迎来爆发
    可以简化决策过程的10个大数据源
    “AI+”改变世界!不同领域的5大人工智能趋势
    预测2021: 区块链领域新景观
    后量子时代的密码学
    考试
    进度总结8
    进度总结7
    进度总结6
    进度总结5
  • 原文地址:https://www.cnblogs.com/tkpn/p/9868803.html
Copyright © 2020-2023  润新知