上一篇文章写到原生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) } })
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
jquery中使用ajax操作案列详解
jquery ajax解析大全
以上就是原生js实现ajax请求方法的详细内容。
