之因此用ajax做爲博客的開篇,是由於不管從ajax的出現仍是從它的做用上來講,ajax對於前端無疑是意義重大的。甚至能夠說,是ajax帶來了前端這個行業。固然,歷史並不能說明當下,曾經的輝煌也會有塵埃落定的時候,但對ajax而言,彷佛並不如此。php
解釋下異步,異步是相對於同步來講的,同步即同時進行(累積多了就排隊,一個一個執行,必須等上一個結束,才能到下一個),而異步就是執行到我了,我去旁邊繼續執行等結果,後面排隊的繼續不用等我結果出來再執行。html
這是對於ajax的特色來設計的,由於ajax對後端數據的請求須要時間,而這個時間不利用起來就是浪費。固然,若是必需要等前一個的結果怎麼辦,這就使用到JS中的重要部分——回調函數了,其實回調在JS中應用不少,只是咱們對它沒有概念而已,像點擊事件執行的就是回調(先綁定事件,只有在點擊發生時,纔會執行)。那麼ajax也同樣,先請求數據,只有在狀態改變時纔會執行接下來的(這個狀態包括請求成功和請求失敗)。前端
經過在後臺與服務器進行少許數據交換,AJAX 能夠使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下,對網頁的某部分進行更新。傳統的網頁(不使用 AJAX)若是須要更新內容,必需重載整個網頁面。ajax
(圖片轉載自https://www.cnblogs.com/ygj0930/p/6126542.html)json
—XMLHTTPRequest對象,(是對象,就有屬性和方法)後端
—經常使用的方法:open("method", "url", "async"),瀏覽器
method表示經過什麼方式進行服務器訪問,包括get和post;服務器
url表示訪問服務器的地址;app
async表示是否異步,包括true和false(注意:true表示異步)。異步
send(content),
content表示向服務器發送的數據。
—經常使用的屬性:先看一下簡單的代碼
1 var xhr = new XMLHTTPRequest(); 2 3 xhr.open("method", "url", "async"); 4 5 xhr.send(null); 6 7 xhr.onreadystatechange = function(){ 8 9 if(xhr.readystate == 4){ 10 11 if(xhr.status == 200){ 12 13 console.log(xhr.responseText) 14 15 } 16 17 } 18 }
下面進行說明:
1. 向服務器請求狀態的階段:
onreadystatechange表示請求狀態改變的事件觸發器,
readystate表示請求狀態,4表示完成,具體以下表:
2. 服務器反饋階段:
status表示http請求狀態碼,200表示成功,具體以下表:
3. 服務器反饋的內容:(數據)
responseText表示響應返回的文本,具體以下表:
(圖片轉載自https://blog.csdn.net/limuzi13/article/details/53636830?utm_source=itdadao&utm_medium=referral)
function ajax(){ var ajaxData = { type: (arguments[0].type || "GET").toUpperCase(), url: arguments[0].url || "", async: arguments[0].async || "true", data: arguments[0].data || null, dataType: arguments[0].dataType || "json", contentType: arguments[0].contentType || "application/x-www-form-urlencoded; charset=utf-8", 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; } } ajax({ type:"POST", url:"ajax.php", dataType:"json", data:{ "name":"abc", "age":123, "id":"456"
}, beforeSend:function(){ //some js code }, success:function(msg){ console.log(msg) }, error:function(){ console.log("error") } })
幾點說明:
IE7及其以上版本中支持原生的 XHR 對象,所以能夠直接用: var oAjax = new XMLHttpRequest();
IE6及其以前的版本中,XHR對象是經過MSXML庫中的一個ActiveX對象實現的。使用下面的語句建立: var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);
GET 請求方式是經過URL參數將數據提交到服務器的,POST則是經過將數據做爲 send 的參數提交到服務器;POST 請求中,在發送數據以前,要設置表單提交的內容類型;
//能夠如下步驟代替上面的open、setRequestHeader、send三行,此處對GET和POST作了很好的區分 var params = {}; for(var key in ajaxData.data){ params.push(key + "=" + ajaxData.data[key]); } var sendData = params.join("&"); if(ajaxData.type.toUpperCase() == "GET"){ xhr.open(ajaxData.type, ajaxData.url + "?" + sendData, ajaxData.async); xhr.send(null); }else{ xhr.open(ajaxData.type, ajaxData.url, ajaxData.async); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8"); xhr.send(sendData); }
暫時先寫到這裏,名字只能叫「ajax工做原理」,原本想寫「原生JS的ajax和jQuery的ajax」的,先到這兒吧。