zoukankan      html  css  js  c++  java
  • 原生js实现jquery的ajax

    如下是一个比较完整的ajax()

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    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差不多:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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")
      }
    })
  • 相关阅读:
    IDEA连接 Oracle数据库
    什么是混合云备份
    什么是阿里云ACA认证
    什么是阿里云ACE认证
    什么是轻量应用服务器
    什么是时序时空数据库TSDB
    什么是数据管理DMS
    什么是分析型数据库PostgreSQL版
    阿里云多端小程序
    阿里云云计算ACP专业认证考试
  • 原文地址:https://www.cnblogs.com/lzm1989/p/6293290.html
Copyright © 2011-2022 走看看