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

}

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”...
    Yeaseon阅读 1,874评论 2 23
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,654评论 0 7
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 8,219评论 2 17
  • 大概是在我上幼儿园的时候,我发现自己喜欢画画。 那时候,幼儿园分班按主题,有舞蹈班,手风琴班,美术班…等等,我是特...
    狂奔工作室cool阅读 345评论 12 0
  • 0209【静水流深】20171020学习力⑦期践行D10 今天去了灵玲马戏城,不知是不是果冻晕车,总发脾气,所以也...
    荔儿果果阅读 257评论 0 0

友情链接更多精彩内容