ajax 前後端資料通訊（互動）的一種技術。
阿新 • • 發佈：2018-12-07
以前的網站，只要使用者進行操作去訪問新的資料都會重新整理整個頁面。
重新整理頁面對使用者體驗不好，增加伺服器的壓力,增加頻寬成本
在請求伺服器的時候，頁面中有一部分資料沒有請求完畢，下面的程式碼都會被阻塞
ajax: Asynchronous Javascript And XML 非同步的js和XML
以前更多的是使用XML的資料格式，但是前端技術發展到今天 資料格式更多的是json
'[]' '{}' 本質都是字串 -> JSON.parse() eval() new Function()
優點: 1.無重新整理更新資料(區域性重新整理) Ajax最大的優點就是能在不重新整理整個頁面的情況下維持與伺服器通訊
2.非同步與伺服器通訊 使用非同步的方式與伺服器通訊，不打斷使用者的操作
3.前端與後端負載均衡 將一些後端的工作移到前端，減少伺服器與頻寬的負擔
4.介面與應用分離 Ajax使得介面與應用分離，也就是資料與呈現分離
單頁應用 單頁SPA
缺點: 1.Ajax幹掉了Back與History功能，即對瀏覽器機制的破壞 在動態更新頁面的情況下，使用者無法回到前一頁的頁面狀態，因為瀏覽器僅能記憶歷史紀錄中的靜態頁面
2.安全問題 AJAX技術給使用者帶來很好的使用者體驗的同時也對IT企業帶來了新的安全威脅， Ajax技術就如同對企業資料建立了一個直接通道。 這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。
3.對搜尋引擎支援較弱 SSR
前後端資料通訊（互動）的一種技術。 （一種前端向後端請求資料的一種手段）前端向後端拿動態資料。
難點: 1.如何拿資料(掌握欄位含義、伺服器要什麼客戶端就傳什麼) ** 2.獲取到資料之後，如何操作資料。****
只要在伺服器上，儘量不要取中文，儘量為英文和數字結合的資料夾
http://localhost:80 預設為192.168.0.1 ajax 互動模型：
<body> 使用者名稱:<input type="text" id="txt"/> <input type="button" value="提交" id="btn"> <script> /* ajax的模型叫電話模式 1.先有一個電話 建立ajax物件 new XMLHttpRequest 2.輸入號碼(撥號) 填寫請求地址 xhr.open('請求的方式','url地址+具體的引數',是否非同步（預設為true）) 3.傳送 send() 4.等待 xhr.onload 5.成功接收 在xhr.onload中接收到資料 xhr.responseText*/ // console.log(XMLHttpRequest) btn.onclick = function(){ let xhr = new XMLHttpRequest; //1.建立ajax物件 xhr.open('get','/get?user='+txt.value,true); //是否非同步 2.填寫請求地址 xhr.send();//3傳送 xhr.onload = function(){ //4.等待伺服器響應 // console.log(xhr.responseText); //5.接收的資訊let data = JSON.parse(xhr.responseText); if(data.code == 0){ txt.className = 'error'; }else if(data.code == 1){ txt.className = 'ok'; } // console.log('===================================='); // console.log(data); // console.log('===================================='); } }; </script> </body>