整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          JavaScript封裝一個自己的Ajax并完善與拓展Ajax
          
        
           
          
	
	
          
		
                        
          在所有主流的網站，基本上都用到了ajax技術，通過異步請求數據已經是一個很普及的實現方式。市面上主流的web前端框架也都有自己封裝的ajax，而且都是大同小異的。也就是說，Ajax這個輪子已經是多的不能再多了，那為什么我們還要自己封裝一個Ajax呢？
          想要了解一個技術或者某個功能的實現原理，只有動手實踐才能真正的了解。就如我在csdn上第一篇博客的博文描述。探索技術的路上本應該自己造輪子，即使市面上有再多的選擇，自己動手嘗試也是必要的，第一次嘗試必然會問題眾多，但你不覺得解決他是一件很有成就感的事情嗎，這樣才能帶給你更大的進步和更深刻的領悟。
          廢話不說，先來寫一個最基礎的ajax：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  var ajax = new XMLHttpRequest(); 
          3.  ajax.onreadystatechange = function(){ 
          4.  if (ajax.readyState == 4 && ajax.status == 200) { 
          5.  a.success(JSON.stringify(ajax.responseText)) 
          6.  } 
          7.  } 
          8.  ajax.open(a.method, a.url,true) 
          9.  ajax.send(a.data) 
          10. } 
          11.  
          12. ajax({ 
          13.  method:'get', 
          14.  url:'http://127.0.0.1:8081/test', 
          15.  success:function(res){ 
          16.  console.log(res) 
          17.  } 
          18. }) 
          一個ajax出爐了，通過調用、填寫參數即可請求到服務器。先來分析一下這個ajax的結構，可以看得出來，其實很簡單，只是new了一個XMLHttpRequest對象，然后通過onreadystatechange方法來處理返回值，現在我們只是做了一個判斷，當請求成功時就調用success方法，如果請求失敗，我們還沒有寫上去，后面我們慢慢完善這個ajax的邏輯。
          然后調用ajax的open方法，open方法里有三個參數，第一個是請求方式（如：get或post），第二個是請求的url地址，第三個是一個bool值，是否要異步請求。
          最后使用send方法帶上參數發送請求即可。
          這是，我的服務器已經收到一個請求，但他報了404錯誤，也就是找不到對應的頁面或路由，這時success方法也不會被調用執行。
          那我們再來完善一下這個新生的ajax。我們只需要在onreadystatechange方法里增加一個條件，當請求不成功時調用自身的error方法：
          [javascript] view plain copy
          1. ajax.onreadystatechange = function(){ 
          2.  if (ajax.readyState == 4 && ajax.status == 200) { 
          3.  a.success(JSON.stringify(ajax.responseText)) 
          4.  }else{ 
          5.  a.error(ajax) 
          6.  } 
          7. } 
          這樣我們就可以在ajax請求的時候加上error方法，當ajax請求失敗的時候執行我們想要執行的操作。現在我們拋除跨域請求的問題，當你發送post請求時，你會發現后臺接收不到傳過來的參數，調用如下：
          [javascript] view plain copy
          1. ajax({ 
          2.  method:'get', 
          3.  url:'http://localhost:8081/test', 
          4.  data:'a=1', 
          5.  success:function(res){ 
          6.  console.log(res) 
          7.  }, 
          8.  error:function(res){ 
          9.  console.log(res) 
          10.  } 
          11. }) 
          后端打印一下傳過來的參數，為空。
          出現這個問題的原因主要是請求頭沒有聲明，這時候我們需要初始化聲明一下請求頭，那我們加入一行代碼：
          [javascript] view plain copy
          1. ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          設置Conten-type為application/x-www-form-urlencoded，現在后端應該是已經可以收到參數了。那我們現在的ajax調用時實在太繁瑣，有些東西我們不想填的我們應該給他設置一個默認值，不然就會報錯。
          比如error方法、method、還有是否異步的bool值等等。那我們再加入一些默認值，現在的ajax是這樣的：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.error = a.error || function(){ 
          5.  console.warn('Ajax請求失敗'); 
          6.  }; 
          7.  var ajax = new XMLHttpRequest(); 
          8.  ajax.onreadystatechange = function(){ 
          9.  if (ajax.readyState == 4 && ajax.status == 200) { 
          10.  a.success(JSON.stringify(ajax.responseText)) 
          11.  }else{ 
          12.  a.error(ajax) 
          13.  } 
          14.  } 
          15.  ajax.open(a.method, a.url,a.ajax) 
          16.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          17.  ajax.send(a.data) 
          18. } 
          現在的ajax還存在一個問題，在post請求的時候，如果我們要傳參，是需要通過字符串傳參的。那這種的書寫規則并不是很友好的：
          [javascript] view plain copy
          1. a=1&b=2 
          而一般框架的傳參都是通過json的格式來輸入的，我們也不能偏離大眾習慣搞獨立，當然我們也要保留字符串的傳參方式，只是要擴展功能。
          那我們需要加一個控制格式的參數，我們這里用dataType這個參數來控制傳參格式，默認是字符串格式傳參好了，可以選擇json格式進行傳參即可。如果是json格式傳參，我們需要把json轉化成字符串類型，代碼如下：
          [javascript] view plain copy
          1. a.dataType = a.dataType || 'string'; 
          2. var data = a.data; 
          3. if (a.dataType == 'json') { 
          4.  var nowData = ""; 
          5.  for (var i in data) { 
          6.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          7.  } 
          8.  data = nowData; 
          9. } 
          這樣，我們的ajax也就可以通過json格式進行傳參了。現在的ajax完整代碼和調用方式如下：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.dataType = a.dataType || 'string'; 
          5.  a.error = a.error || function(){ 
          6.  console.warn('Ajax請求失敗'); 
          7.  }; 
          8.  var ajax = new XMLHttpRequest(); 
          9.  ajax.onreadystatechange = function(){ 
          10.  if (ajax.readyState == 4 && ajax.status == 200) { 
          11.  a.success(JSON.stringify(ajax.responseText)) 
          12.  }else{ 
          13.  a.error(ajax) 
          14.  } 
          15.  } 
          16.  var data = a.data; 
          17.  if (a.dataType == 'json') { 
          18.  var nowData = ""; 
          19.  for (var i in data) { 
          20.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          21.  } 
          22.  data = nowData; 
          23.  } 
          24.  ajax.open(a.method, a.url,a.ajax) 
          25.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          26.  ajax.send(data) 
          27. } 
          28. //調用Ajax示例 
          29. ajax({ 
          30.  method:'post', 
          31.  url:'http://localhost:8081/test', 
          32.  dataType:'json', 
          33.  data:{ 
          34.  a:'1', 
          35.  b:'2' 
          36.  }, 
          37.  success:function(res){ 
          38.  console.log(res) 
          39.  } 
          40. }) 
          現在這個Ajax基本上已經可以滿足業務上的所以需求，不過還有一點沒有實現，我們的Ajax不能設置請求頭？！為了一些特殊需求的情況下，我們還是要把這一功能加上的：
          [javascript] view plain copy
          1. if (a.requestHeader) { 
          2.  for (var i in a.requestHeader) { 
          3.  ajax.setRequestHeader(i,a.requestHeader[i]) 
          4.  } 
          5. } 
          現在的完整代碼入下：
          [javascript] view plain copy
          1. function ajax(a){ 
          2.  a.method = a.method || 'get'; 
          3.  a.ajax = a.ajax || true; 
          4.  a.dataType = a.dataType || 'string'; 
          5.  a.error = a.error || function(){ 
          6.  console.warn('Ajax請求失敗'); 
          7.  }; 
          8.  var ajax = new XMLHttpRequest(); 
          9.  ajax.onreadystatechange = function(){ 
          10.  if (ajax.readyState == 4 && ajax.status == 200) { 
          11.  a.success(JSON.parse(ajax.responseText)) 
          12.  }else if (ajax.readyState != 4 && ajax.status != 200){ 
          13.  a.error(ajax) 
          14.  } 
          15.  } 
          16.  var data = a.data; 
          17.  if (a.dataType == 'json') { 
          18.  var nowData = ""; 
          19.  for (var i in data) { 
          20.  nowData += (nowData != ''?'&':'')+i+'='+data[i]; 
          21.  } 
          22.  data = nowData; 
          23.  } 
          24.  ajax.open(a.method, a.url,a.ajax) 
          25.  if (a.requestHeader) { 
          26.  for (var i in a.requestHeader) { 
          27.  ajax.setRequestHeader(i,a.requestHeader[i]) 
          28.  } 
          29.  } 
          30.  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
          31.  ajax.send(data) 
          32. } 
          完整示例代碼文件：JavaScript封裝Ajax完整示例代碼
          jax指的是異步JavaScript和XML，是一套綜合了多項技術的瀏覽器端網頁開發技術。也是目前網頁前端設計較為流行使用的技術。Ajax能夠真正實現網頁前端與業務后臺的分離，體現出網頁設計大前端的設計思想。所有的前端設計只需要通過Ajax將消息傳遞給業務邏輯，運算完直接發送前端。其實現原理如下：
          工作原理及過程
          一般情況下，在處理具體業務是網頁通常采用發送HTTP請求中帶有參數形式傳遞命令與數據，處理頁面接收到數據之后進行處理。這種情況需要頁面跳轉或者頁面刷新，增加了服務器與客戶端通信的開銷。而使用Ajax技術進行業務處理時只需要通過Ajax與Json實現在不刷新頁面前提下完成業務功能，在滿足前后端分離的基礎上進一步降低網絡通信量。本文針對初學者以實例形式對Ajax應用進行說明，希望對初學者有所幫助。
          設計案例
          案例描述：前端為用戶信息查詢頁面login.html,提供文本框用于接收用戶姓名，業務邏輯處理頁面為query.php,模擬接收用戶姓名，執行查詢，返回用戶基本信息，前端login.html通過Ajax回調函數讀取信息并以table形式進行輸出顯示。其前端頁面設計如下：
          前端測試頁面
          基本語法
          (1) XMLHttpRequest對象
          XMLHttpRequest是 AJAX 的基礎。用于向服務器發送request請求實現數據交換。由于是對象XMLHttpRequest在使用的時候需要用new進行對象的實例化。如：var xmlhttp = new XMLHttpRequest();
          (2) 發送請求open()與send()
          通過使用open與send方法將客戶端Ajax請求發送到服務器端，其中open請求帶有請求類型等參數，send可以帶傳遞的參數值。兩函數基本語法如下：
          open(method,url,async)//方法、處理URL，異步/同步
send(string)//post類型時傳遞參數

          (3) onreadystatechange 事件
          通過使用該事件用于響應服務器端狀態的改變，readyState與status，其中readyState=4表示服務器請求已完成，響應已就緒。status=200表示已就緒。因此可以在該事件響應函數中去接收服務端傳遞數據。
          (4) 服務器返回值類型responseText與responseXML,其中responseText表示接收服務器發送過來的字符串。
          案例實現
          （1）獲取表單用戶名值 var uname=document.getElementById('name').value;
          （2）發送Ajax POST請求
          Ajax Post請求
          （3）（服務器請求處理）業務邏輯處理
          php處理業務邏輯
          （4）前端獲取服務器值并輸出顯示表格
          前端顯示服務器發送數據（在不刷新頁面情況下）
          以上給出使用JavaScript原生態Ajax進行服務器與客戶端瀏覽器進行數據交互的簡單例題，重點為XMLHttpRequest對象的使用，業務邏輯處理使用了PHP。整體實現效果GIF動圖描述如下：
          Ajax實現效果
          本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：
          1. 前端設計-響應式頁面開發基礎
          2. Web開發前端、后端與全棧的區別是什么？
          接：https://segmentfault.com/a/1190000017396192
          一、什么是Ajax
          AJAX即“Asynchronous Javascript And XML”，Ajax是一種異步請求數據的web開發技術，對于改善用戶的體驗和頁面性能很有幫助。簡單地說，在不需要重新刷新頁面的情況下，Ajax 通過異步請求加載后臺數據，并在網頁上呈現出來。常見運用場景有表單驗證是否登入成功、百度搜索下拉框提示和快遞單號查詢等等。Ajax的目的是提高用戶體驗，較少網絡數據的傳輸量。同時，由于AJAX請求獲取的是數據而不是HTML文檔，因此它也節省了網絡帶寬，讓互聯網用戶的網絡沖浪體驗變得更加順暢。
          二、Ajax原理是什么
          在解釋Ajax原理之前，我們不妨先舉個“領導想找小李匯報一下工作”例子，領導想找小李問點事，就委托秘書去叫小李，自己就接著做其他事情，直到秘書告訴他小李已經到了，最后小李跟領導匯報工作。
          Ajax請求數據流程與“領導想找小李匯報一下工作”類似。其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，它扮演的角色相當于秘書，使得瀏覽器可以發出HTTP請求與接收HTTP響應。瀏覽器接著做其他事情，等收到XHR返回來的數據再渲染頁面。
          理解了Ajax的工作原理后，接下來我們探討下如何使用Ajax。
          三、Ajax的使用
          1.創建Ajax核心對象XMLHttpRequest(兼容性)
           1. var xhr=null; 
 2. if (window.XMLHttpRequest) 
 3. {// 兼容 IE7+, Firefox, Chrome, Opera, Safari 
 4. xhr=new XMLHttpRequest(); 
 5. } else{// 兼容 IE6, IE5 
 6. xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
 7. } 

          2.向服務器發送請求
           1. xhr.open(method,url,async); 
 2. send(string);//post請求時才使用字符串參數，否則不用帶參數。

          • method：請求的類型；GET 或 POST
          • url：文件在服務器上的位置
          • async：true（異步）或 false（同步）
          注意：post請求一定要設置請求頭的格式內容
          xhr.open("POST","test.html",true); 
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xhr.send("fname=Henry&lname=Ford"); //post請求參數放在send里面，即請求體

          3.服務器響應處理（區分同步跟異步兩種情況）
          responseText 獲得字符串形式的響應數據。
          responseXML 獲得XML 形式的響應數據。
          ①同步處理
           1. xhr.open("GET","info.txt",false); 
 2. xhr.send(); 
 3. document.getElementById("myDiv").innerHTML=xhr.responseText; //獲取數據直接顯示在頁面上

          ②異步處理
          相對來說比較復雜，要在請求狀態改變事件中處理。
           1. xhr.onreadystatechange=function() { 
 2. if (xhr.readyState==4 &&xhr.status==200) { 
 3. document.getElementById("myDiv").innerHTML=xhr.responseText; 
 4. }
 5. } 

          什么是readyState？
          readyState是XMLHttpRequest對象的一個屬性，用來標識當前XMLHttpRequest對象處于什么狀態。
          readyState總共有5個狀態值，分別為0~4，每個值代表了不同的含義
          • 0：未初始化 -- 尚未調用.open()方法；
          • 1：啟動 -- 已經調用.open()方法，但尚未調用.send()方法；
          • 2：發送 -- 已經調用.send()方法，但尚未接收到響應；
          • 3：接收 -- 已經接收到部分響應數據；
          • 4：完成 -- 已經接收到全部響應數據，而且已經可以在客戶端使用了；
          什么是status？
          HTTP狀態碼(status)由三個十進制數字組成，第一個十進制數字定義了狀態碼的類型，后兩個數字沒有分類的作用。HTTP狀態碼共分為5種類型：
          常見的狀態碼
          僅記錄在 RFC2616 上的 HTTP 狀態碼就達 40 種，若再加上 WebDAV（RFC4918、5842）和附加 HTTP 狀態碼 （RFC6585）等擴展，數量就達 60 余種。接下來，我們就介紹一下這些具有代表性的一些狀態碼。
          • 200 表示從客戶端發來的請求在服務器端被正常處理了。
          • 204 表示請求處理成功，但沒有資源返回。
          • 301 表示永久性重定向。該狀態碼表示請求的資源已被分配了新的URI，以后應使用資源現在所指的URI。
          • 302 表示臨時性重定向。
          • 304 表示客戶端發送附帶條件的請求時（指采用GET方法的請求報文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一個首部）服務器端允許請求訪問資源，但因發生請求未滿足條件的情況后，直接返回304Modified（服務器端資源未改變，可直接使用客戶端未過期的緩存）
          • 400 表示請求報文中存在語法錯誤。當錯誤發生時，需修改請求的內容后再次發送請求。
          • 401 表示未授權（Unauthorized)，當前請求需要用戶驗證
          • 403 表示對請求資源的訪問被服務器拒絕了
          • 404 表示服務器上無法找到請求的資源。除此之外，也可以在服務器端拒絕請求且不想說明理由時使用。
          • 500 表示服務器端在執行請求時發生了錯誤。也有可能是Web應用存在的bug或某些臨時的故障。
          • 503 表示服務器暫時處于超負載或正在進行停機維護，現在無法處理請求。
          ③GET和POST請求數據區別
          • 使用Get請求時,參數在URL中顯示,而使用Post方式,則放在send里面
          • 使用Get請求發送數據量小,Post請求發送數據量大
          • 使用Get請求安全性低，會被緩存，而Post請求反之
          關于第一點區別，詳情見下面兩張圖：
          其實XMLHttpRequest或者封裝后的框架進行網絡請求,這種方式已經有點老舊了，配置和調用方式非常混亂，近幾年剛剛出來的Fetch提供了一個更好的替代方法，它不僅提供了一種簡單，合乎邏輯的方式來跨網絡異步獲取資源，而且可以很容易地被其他技術使用。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
欧洲精品一区二区三区在线观看|
精品一区二区三区无码免费直播|
国产成人无码AV一区二区
|
亚洲国模精品一区|
亚洲福利精品一区二区三区|
色综合久久一区二区三区|
无码AV一区二区三区无码
|
九九久久99综合一区二区|
日本午夜精品一区二区三区电影|
亚洲色一区二区三区四区|
国产一区二区三区免费视频|
国产精品免费一区二区三区四区|
无码精品尤物一区二区三区|
亚洲国产av一区二区三区|
无码人妻AⅤ一区二区三区|
日本精品一区二区久久久|
亚洲国产一区国产亚洲
|
亚洲国产激情一区二区三区
|
在线观看免费视频一区|
国产情侣一区二区|
一区二区三区四区免费视频|
亚洲国产成人久久一区WWW
|
无码一区二区三区视频|
色视频综合无码一区二区三区|
中文字幕日韩一区二区不卡|
少妇无码一区二区三区免费|
久久精品国产一区二区三区不卡
|
亚洲一区二区三区在线|
少妇精品无码一区二区三区|
中文字幕日韩人妻不卡一区
|
红杏亚洲影院一区二区三区|
无码一区二区三区中文字幕|
亚洲制服丝袜一区二区三区|
久久一区不卡中文字幕|
亚洲一区二区三区电影|
另类免费视频一区二区在线观看|
日本精品高清一区二区|
久久91精品国产一区二区|
精品无码AV一区二区三区不卡|
人妻少妇一区二区三区|
亚洲无圣光一区二区|