網絡 set 情況下 javascrip XML .net type 技術分享 jin

1.概念：什麽是AJAX
AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是一種創建交互式網頁應用的網頁開發技術。
2.為什麽要使用他？
最大的優點：不刷新整個頁面的情況下與服務器通信保持原有頁面狀態，通俗點，瀏覽網頁的時候回有兩種情況，點擊，1，白屏，等待跳轉到另一個頁。2.頁面不刷新，局部出現新內容獲得更好的用戶體驗。
3.基本原理
先看圖

XHR相當於是一個通信兵，來負責客戶端與服務器之間的通信傳輸。要打仗了，前方陣地不可能只等著通信兵傳遞消息其他什麽也不幹吧，所以前方陣地還在幹著自己的事情派通信兵去請求後方指揮的命令（服務器），指揮下達命令指揮，通信兵再吧命令傳到前方陣地（客戶端），然後客戶端吧數據渲染到頁面。

那什麽是XHR？（AJAX工作原理）
他的全稱是XMLHttpRequest，AJAX就是通過瀏覽器的內置對象XHMHttpResquest來發送異步請求的，異步請求不會妨礙前方陣地（客戶端）的任何操作。
4.了解異步和同步
剛才說了異步，那什麽是同步，同步就是前方陣地和通信兵一起去像服務器請求數據，直到通信兵請求到數據我才開始渲染頁面，在請求的過程中一直是白屏等待的。
5.XMLHttpResquest對象的屬性有哪些？
AJAX既然是通過瀏覽器的內置對象XMLHttpRequest來處理異步請求的那我們先來了解下他又哪些屬性
屬性 描述
1. onreadyStatechange 狀態改變的事件觸發器每個狀態改變時都會觸發 這個事件處理器，通常會調用一個javaScript函數
2. readyState 請求的狀態：
0>.請求未初始化
1>.服務器鏈接已建立
2>.請求已接收
3>.請求處理中
4>.請求已完成，響應已就緒
3.responseText 返回請求數據文本
4.responseXML 返回XML文檔對象
5.status 返回狀態碼 如404 200

6.創建XMLHttpRequest對象並發送AJAX請求
為了應對所有的現代瀏覽器，檢測是否支持XMLHttpRequest對象

 1 window.onload = function(){  
 2         　　//1.創建XMLHttpRequest對象考慮兼容性
 3         　　 var xhr = null
 
;
 4         　　if(window.XMLHttpRequest){  
 5         　　//現代瀏覽器
 6          　　xhr = new XMLHttpRequest(); 
 7        　　 }else{
 8             　　 xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);//IE5/6
 9          　　}
10      　　} 
11         console.log(‘狀態A‘+xhr.readyState);
12 
13         //2.設置請求方式。第一種方式get請求（2）post請求 
14         var url = ‘數據‘ ；
15         //get請求，true異步請求，false，同步 
16         xhr.open(‘get‘, url, true);
17         console.log(‘狀態B‘+xhr.readyState);
18          /*（2）post請求 必須添加請求頭
19              var url = ‘數據‘；
20              xhr.open(‘post‘, url, true)；
21              xhr.setRequestHander(‘Content-type‘,‘application/x-www-form-urlencoded‘)；
22            */
23         //3.發送請求 
24         xhr.send();
25         console.log(‘狀態C‘+xhr.readyState);
26         //4.回調函數
27         xhr.onreadyStatechange = function() {
28         if(xhr.readyState == 4 && xhr.status == 200){ 
29              console.log(xhr.resposeText);  //字符串
30 　　　　　　 //console.log(xhr.resposeXML) 
31          } 
32       }    
33                 

AJAX的優點：
1.最大的優點就是頁面無需刷新，在頁面內與服務器通信，非常好的用戶體驗。
2.使用異步的方式與服務器通信，不需要中斷操作。
3.可以把以前服務器負擔的工作轉嫁給客戶端，減輕服務器和帶寬，可以最大程度減少冗余請求。
缺點：
1.AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞。
在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，因為瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；用戶通常會希望單擊後退按鈕能夠取消他們的前一次操作，但是在Ajax應用程序中，這將無法實現。
2.安全問題技術同時也對IT企業帶來了新的安全威脅，ajax技術就如同對企業數據建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的數據和服務器邏輯。ajax的邏輯可以對客戶端的安全掃描技術隱藏起來，允許黑客從遠端服務器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL註入攻擊和基於credentials的安全漏洞等。
3.對搜索引擎的支持比較弱。如果使用不當，AJAX會增大網絡數據的流量，從而降低整個系統的性能。
4.、一些手持設備（如手機、PDA等）現在還不能很好的支持ajax，比如說我們在手機的瀏覽器上打開采用ajax技術的網站時，它目前是不支持的，當然，這個問題和我們沒太多關系。(這個時候我們可以用其他的插件來代替)

轉自：https://blog.csdn.net/youjinli122/article/details/77412851

AJAX工作原理與缺點