js實現jq的ajax
阿新 • • 發佈:2017-06-26
log ajax == class ros 編碼 syn obj header
本文將介紹如何使用js封裝一段代碼,實現jq的ajax功能,每一步代碼均有註釋便於理解
實現代碼
function ajax(){ //獲取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(); //創建 XMLHttpRequest 對象 xhr.responseType=ajaxData.dataType; //預期服務器返回的數據類型 xhr.open(ajaxData.type,ajaxData.url,ajaxData.async); //規定請求的類型、URL 以及是否異步處理請求 xhr.setRequestHeader("Content-Type",ajaxData.contentType); //發送信息至服務器時內容編碼類型(向請求添加 HTTP 頭) xhr.send(convertData(ajaxData.data)); //將請求發送到服務器 //當請求被發送到服務器時,我們需要執行一些基於響應的任務。 //每當 readyState 改變時,就會觸發 onreadystatechange 事件。//readyState 屬性存有 XMLHttpRequest 的狀態信息。 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if(xhr.status == 200){ ajaxData.success(xhr.response) }else{ ajaxData.error() } } } } //創建 XMLHttpRequest 對象 function createxmlHttpRequest() { if (window.ActiveXObject) { // IE6, IE5 瀏覽器執行代碼 return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 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實現jq的ajax