Native js implements ajax request method-JS Tutorial-php.cn

This time I will bring you native js to implement ajaxrequest method, what are the precautions for native js to implement ajax requestmethod, the following is a practical case, let's take a look.

The previous article wrote about somecommon functionsthat native js replacesjquery:Native js imitates some common methods of jquery, then, ajax How to achieve this? The following is a relatively complete 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; } }

Copy after login

The usage format is similar to jquery’s 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") } })

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!