美文网首页
原生js实现ajax方法总结;

原生js实现ajax方法总结;

作者: love2013 | 来源:发表于2016-11-07 19:53 被阅读383次

    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")

    }

    })

    相关文章

      网友评论

          本文标题:原生js实现ajax方法总结;

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