Ajax實現的原理--瞭解異步請求和局部刷新
Ajax實現的原理--瞭解異步請求和局部刷新
歡迎大家，經過我看一堆的ajax的文章，今天給大家總結做一個最實用，跟着思路走絕對明白的介紹。
首先我們要知道,AJAX是Asynchronous JavaScript and XML的縮寫， 翻譯一下「 平行移動 JavaScript 和 XML 」 想要了解原理，我們首先要知道AJAX能做什麼
1. AJAX 能做什麼
ajax主要是實現頁面和web服務器之間數據的異步傳輸。那麼有同學就會問，什麼是異步傳輸？ 異步傳輸和同步傳輸相對應，同步傳輸就是，比如想要訪問一個圖，圖下邊有文字，你的瀏覽器發送了一個請求，在服務器正在解釋你的請求，準備給你發文件的時候，你的瀏覽器會一直等。不會繼續加載下邊的字，直到拿到這個圖片，纔會繼續加載下邊的字。瀏覽器是直接向服務器發送請求，並直接接收、處理服務器響應的數據的。這就導致了瀏覽器發送完一個請求後，就只能乾等着服務器那邊處理請求，響應請求，在這期間其它事情都做不了。而異步請求就是在服務器還沒投給你圖片的時候，你的瀏覽器會繼續向下工作。把文字加載出來。只要服務器響應把圖片給你，會立即會執行一個JS的回調函數，把圖片渲染上去。
2.同步請求
JavaScript 語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那麼，爲什麼JavaScript 不能有多個線程呢 ？這樣能提高效率啊。
JavaScript 的單線程，與它的用途有關。作爲瀏覽器腳本語言，JavaScript 的主要用途是與用戶互動，以及操作 DOM。這決定了它只能是單線程，否則會帶來很複雜的同步問題。比如，假定JavaScript 同時有兩個線程，一個線程在某個 DOM 節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程爲準？
所以，爲了避免複雜性，從一誕生，JavaScript 就是單線程，這已經成了這門語言的核心特徵，將來也不會改變。
爲了利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許 JavaScript 腳本創建多個線程，但是子線程完全受主線程控制，且不得操作 DOM。所以，這個新標準並沒有改變 JavaScript 單線程的本質。
也正是因爲JavaScript 單線程的本質所以就造成了上述的同步傳輸。
3.異步請求
那麼？究竟AJAX是如何讓讓程序繼續向下走的呢?
瀏覽器把請求交給代理對象—XMLHttpRequest（絕大多數瀏覽器都內置了這個對象），由代理對象向服務器發起請求，接收、解析服務器響應的數據，並把數據更新到瀏覽器指定的控件上。從而實現了頁面數據的局部刷新。異步請求使瀏覽器不用等待服務器處理請求，不用重新加載整個頁面來展示服務器響應的數據，在異步請求發送的過程中瀏覽器還能進行其它的操作。我們來看一下異步請求的執行流程圖：
當服務器把數據返回時，會執行回調函數把數據渲染上去。
4.局部刷新
Web的運作原理：一次HTTP請求對應一個頁面。如果要讓用戶留在當前頁面中，同時發出新的HTTP請求，就必須用JavaScript發送這個新請求，接收到數據後，再用JavaScript更新頁面，這樣一來，用戶就感覺自己仍然停留在當前頁面，但是數據卻可以不斷地更新。而ajax就解決了這個問題可以，因爲ajax一般就是直接操作DOM，所以AJAX能做到所謂的「無刷新」用戶體驗。
大家有什麼見解評論區見