原生js实现ajax方法(超简单)

转载  2016-09-20   投稿：jingxian  

下面小编就为大家带来一篇原生js实现ajax方法(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

上一篇文章写到原生js取代jquery的一些常用函数：原生js仿jquery一些常用方法，那么，ajax如何实现呢？如下是一个比较完整的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; } }

使用格式跟jquery的ajax差不多：

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方法(超简单)的全部内容了，希望对大家有所帮助，多多支持脚本之家~

您可能感兴趣的文章:

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具