Ajax基礎之原生js封裝
阿新 • • 發佈:2018-11-05
既然要經常用到Ajax請求,封裝函式就很必要了,下面栗子的js程式碼,我們來進行封裝。
window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get','getNews.php',true); xhr.send(); xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { //紅色標識為成功後執行的任務var data = JSON.parse( xhr.responseText ); // 將後臺獲取的內容轉為json型別 每一個json裡面有兩個鍵:title和date var oUl = document.getElementById('ul1'); // 獲取顯示新聞列表的節點 var html = ''; for (var i=0; i<data.length; i++) { // 迴圈所有的json資料,並把每一條新增到列表中 html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML = html; //把內容放在頁面裡} else { alert('出錯了,Err:' + xhr.status); } } } } } </script>
封裝函式的要點就是把重複使用的部分提取取來,同時一些變化的東西作為引數,無法作為引數的進行判斷處理。
1 所以我們先看看變化的東西都有哪些:1 請求方式是get/post 2 請求的地址 3 請求的資料 4 請求成功後需要做的事情
所以這四個就做為函式的引數:ajax(method,url,data,success);
2 因為不同的請求方式,我們傳資料的方式不一樣,所以對於這些,需要進行條件判斷。
3 還有一個問題就是關於 xhr.responseText ,變數xhr是在封裝函式中宣告的,所以這個東西屬於ajax函式的,我們在success函式中是用不到的, 但是success這個函式裡面需要用這個資料。所以辦法就是在封裝函式中呼叫success函式的時候,把xhr.responseText當作引數傳出去。success(xhr.responseText)。
其實這是一種回撥,回撥就是一個函式作為另一個函式的引數,並在另一個函式裡面被呼叫,這個栗子就是success作為ajax函式的引數,並在ajax裡面被呼叫。 (其實個人感覺就是函式在用引數,函式的引數,就是拿來用的,只是現在引數是函式,所以就呼叫唄)。
所以封裝後就是這樣:
function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } if (method == 'get' && data) { url += '?' + data; } xhr.open(method,url,true); if (method == 'get') { xhr.send(); } else { xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.send(data); } xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { success && success(xhr.responseText); //如果函式存在就執行後面的 &&的執行過程就是前面的是真,才執行後面的。 } else { alert('出錯了,Err:' + xhr.status); } } } }
呼叫就是這樣
ajax('get','getNews.php','',function(data) { var data = JSON.parse( data ); var oUl = document.getElementById('ul1'); var html = ''; for (var i=0; i<data.length; i++) { html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML = html; });
其實這個封裝,還不是那麼好,比如上面的data沒有資料,我們還是得佔位,像jquery裡面用json格式傳參,就方便一些,目前還未總結好,後期補充。