面試題三（原理）
ajax原理
1.什麼是ajax
Ajax（四個單詞的縮寫，Asynchronous JavaScript and XML）是一種網友互動的開發技術
可以在頁面不重新整理的情況下向伺服器傳送HTTP請求，並使用JavaScript處理返回的結果
傳送Ajax的初衷是為了使用者的表單進行資料驗證，因為在網路匱乏的年代傳送一個請求的速度特別慢，有了Ajax之後可以大大提高表單的提交效率
2.Ajax的用途
Ajax技術在現代網頁中使用的非常廣泛，比如最常見的百度和淘寶 的相關關鍵字提醒，
註冊頁面檢測使用者是否已經存在，瀑布流效果，頁面懶載入效果都是通過Ajax實現的。
3.Ajax的特點
Ajax可以實現頁面的區域性重新整理，相對於頁面的整體重新整理Ajax資料互動的速度更快，使用者等待的時間也更短，使用者體驗也相對較好
不僅如此Ajax還能夠提高頁面的載入速度，就是常說的懶載入效果
對於一些使用者現在瀏覽不到 的頁面選擇不載入等到頁面滾動到目標位置之後，然後通過Ajax請求伺服器的資料 來顯示內容
4.ajax的使用
原生的方式請求包括四步
（1）。建立Ajax請求物件
（2）。繫結事件
（3）。初始化
（4) 。傳送請求
(GET) var x = new XMLHttpRequest(); var x.readystatechanges = function(){ if(onreadyState == 4 && status == 200){ console.log(x.responseText); } x.open('GET', './server.php?id=2', true); x.send(); } (POST) xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded'); 傳送引數 send('a=100&b=www') (jquery TP5.0傳送ajax) $.ajax({ url:"{:url('Order/recy_del')}", type:'POST', data:{'id':id}, success:function (res) { if(res.code==1){ layer.msg(res.msg,{icon:1,time:1500},function(){ window.location.reload() }); }else{ layer.msg(res.msg,{icon:2,time:1500},function(){ window.location.reload(); }); } }, }) (axios TP5.0傳送ajax) axios.post('/wechat.php/order/xiandan',{'ajaxData':ajaxData,'sid':sid,'mid':mid,'did':did,'price':price}).then( function(res){ if(res.data){ window.location.href = '/wechat.php/order/dingdanxiangqing?id='+res.data; }else{ layer.open({skin:'msg', content: '提交訂單失敗！', time: 1.5}); } } ).catch()
AJAX 可以傳送兩種型別請求, GET 和 POST , get 傳參是將引數綴到 url 的後邊, post 傳參需要把引數放置在 send 方法中.
------------------------------------------------------------------------------------------------------------------------------------------
// readyState 是 ajax 物件中的一個屬性, 用來表示ajax物件的狀態, 總共是 5 個值, 0-4
/**
0 代表未初始化
1 正在向服務端傳送請求
2 已經接收完全部響應資料
3 表示正在解析資料
4 解析已經完成
*/
// status 是伺服器響應的狀態碼
/**
常見的狀態碼有
200 OK
302 跳轉
304 Not Modified
403 Forbidden
404 Not Found
500 內部錯誤
*/
5. 其他的方式
除了原生方式可以傳送 AJAX 請求之外, 我們在專案中一般會使用第三方的工具包來發送,
比如 jquery axios(安可C哦斯), 特別是 axios 是專門用來發送請求用的, 現在很多的單頁APP在進行伺服器互動的時候 都會使用 axios.
6.資料的返回
在進行資料返回的時候，伺服器一般的返回資料是json格式的 JavaScript需要對json格式的資料進行解析，解析的方式json。parse，
如果是jQuery的話可以在傳送的時候指定dataType為json，那麼返回的資料就直接是json的物件
7.Ajax的缺點
當然 AJAX 也有一些缺點, 最大的缺點就是不能跨域, A 網站無法向 B 網站傳送 AJAX 請求(就是所說的同源策略),
解決這個問題我們可以使用 jsonp 技術. 例如jquery 中的 $.getJSON, 向伺服器傳送請求的時候,
將(回撥的)函式名傳遞給伺服器, 伺服器在返回結果的時候, 返回的是一個函式的呼叫的字串,
函式執行的引數就是資料
$.getJSON('http://b.com/server.php?callback=?',function(data){
console.log(data)
})
伺服器程式碼
// b.com 伺服器
// server.php
$str = json_encode(['name'=>'zhangsan','age'=>20]);
echo $_GET['callback']."($str)";