​

首先什麼是AJAX？

         AJAX : Asynchronous JavaScript and XML（非同步JavaScript和XML技術）。

        JavaScript：XMLHttpRequest(核心物件)。

        XML：可擴充套件標記語言，資料儲存與交換。

        是在不重新載入（重新整理）整個頁面的情況下，與伺服器交換資料並更新部分網頁的內容。

        優缺點：無刷新技術，提升使用者體驗，減少網路佔用；不利於SEO優化。

步驟：

        1. 建立核心物件

                var xhr = new XMLHttpRequest();

        2. 準備建立連線

                xhr.open(method, url, async);

                method -- 請求方式："GET"/"POST"

                url -- 請求資源的URL

                async -- 是否非同步，通常 true(非同步)，如果設定為 false表示是同步

          3. 傳送請求

                xhr.send();

          4. 處理響應

                xhr.onreadystatechange = function(){}

                xhr.readyState -- 就緒狀態碼

                -- 表示 xhr 狀態資訊，即請求到達哪個階段

                -- 4 ：請求處理完畢，響應就緒

                xhr.status -- HTTP 狀態碼

                -- 200 ：OK，請求成功

                xhr.responseText -- 獲取響應文字

就緒狀態碼：

        0: 請求未初始化

        1: 伺服器連線已建立

        2: 請求已接收

        3: 請求處理中

        4: 請求已完成，且響應已就緒

常用HTTP：

        1**——資訊，伺服器收到請求，需要請求者繼續執行操作

        2**——成功，操作被成功接收並處理

        3**——重定向，需要進一步的操作以完成請求

        4**——客戶端錯誤，請求包含語法錯誤或無法完成請求

        5**——伺服器錯誤，伺服器在處理請求的過程中發生了錯誤

        說跨域前需要先說說同源策略

同源策略：

        瀏覽器安全策略，保障非同源資源之間資料訪問的安全性。

        預設不允許非同源的資源直接訪問。

        URL：協議://域名:埠/路徑名稱?查詢字串#hash

        同源：協議、域名、埠完全一致，只要三個中有任何一個不一致，則是非同源

        非同源資源間需要進行訪問，則需要實現跨域。

跨域方法一：CORS跨域

        CORS跨域比較簡單，只需要後端在PHP檔案頭部加一個頭資訊及：

                header('Access-Control-Allow-Origin:*')；

        *表示允許所有域名訪問，如果只是一個檔案訪問則吧*換成指定域名。

        可解決GET/POST跨域需求

跨域方法二：JSONP跨域

        利用<script>在引入外部JS時不受同源策略限制的特性，同時包含JSON編碼資料的響應體會自動解碼，來實現跨域。JSONP處理的是GET請求方式的跨域

步驟：

        後端：

                有伺服器端構建一個字串：字串中的內容是能夠在 JS 中執行的函式呼叫的結構

        前端：

                1. 建立 元素

                2. 設定 src 屬性，傳遞 callback 引數指明全域性回撥函式的名稱

                3. 新增到 body 中

                4. 建立全域性函式，用於處理響應資料

                5. 刪除 元素

編輯：千鋒HTML5