全稱：Asynchronous JavaScript And XML

簡單的說就是利用一系列技術，使用Ajax模型，在不重新整理頁面的基礎上與伺服器進行通訊

Ajax實現

都是通過XHR物件實現的，IED範文中以ActiveXObject實現（不考慮）

XHR

全稱：XMLHttpRequest，雖然叫做這個，但是XHR可以取回所以型別的資源，並不侷限於XML

建立XHR物件

new XMLHttpRequest()建立

屬性

readyState

readyState有不同的值，在不同的值代表不同的狀態

0：尚未傳送

1：請求已經開啟，但是尚未傳送

2：已經開始傳送

3：傳送中

4：傳送結束（另外，注意只有當狀態為4階段的時候，才有resonseText資訊）

responseType

responseType有不同的值，不同的值代表的型別不同

‘’：預設，字串

‘arraybuffer’：arraybuffer型別

'blob'：HEADERS_RECEIVED

'document'：document

'json'：json

'text'：字串

XHR方法

主要的方法有三個

open(method,url,async,username,password)

代表初始化請求，開啟請求

• method：傳送的方法，有GET/POST/DELETE/HEAD/OPTIONS/PUT
• url：地址
• async：是否非同步，預設是非同步
• username：使用者名稱
• password：密碼

setRequestHeader(header,value)

設定請求頭資訊

• header：名稱
• value：對應的值

send(data)

傳送請求

• data：String/FormData

示例

            var xhr=new XMLHttpRequest();   //建立xhr物件
            xhr.onreadystatechange = function(callback) {
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status <300 || xhr.status == 304){
                        callback(xhr.responseText);
                    }
                    else{
                        console.error('失敗'+xhr.status);
                        
                    }
                }
            }
            xhr.open('get','example.com',true);     //開啟請求
            xhr.setRequestHeader('header-key','header-value');   //  設定頭部
            xhr.send(null)  //傳送請求

首先是建立xhr物件，然後通過監聽readyState，來判斷當前的狀態值的變化，然後通過onreadystatechange判斷，當值變為我們需要的值時，執行一些操作

Ajax跨域

什麼是跨域？

• 違反瀏覽器同源策略的資源訪問行為

什麼是同源？

• 兩個頁面必須使用的是相同的協議，埠，主機，比如都是http（協議），都是80（埠），都是xxx.com（主機也就是域名），換句話說，也就是網址前面的：http://xxx.com:80，這一段必須完全相同，則是同源

我個人的理解就是，訪問不同網址資料夾的資源，比如有兩個網站a.com和b.com，這兩個網站的資源包括圖片，網頁等都儲存在各自的資料夾下，但是如果要a.com訪問b.com資料夾下的內容，就不行，這時就需要用到跨域

為什麼要跨域？

實際上，很多內容都需要跨域，最簡單的不同的應用域名就不同，因此就就無法訪問，所以用到了跨域

跨域的方法

CORS(Cross-Origin Resource Sharing)

iframe代理

• message
• window.name
• document.domain

JSONP

CORS(Cross-Origin Resource Sharing)

是xhr2的新特性，但是xhr1中是禁止跨域請求的，所以存在一定的相容問題

xhr2中，可以傳送跨域請求，由伺服器決定是否允許，瀏覽器不再幹涉

xhr1中，即時伺服器端允許，前端也傳送了請求，但是瀏覽器會禁止傳送

iframe代理

簡單的說，就是在a.com中嵌入了一個b.com的頁面，所有需要訪問b.com的資源頭通過嵌入的代理頁面去請求訪問，這種方式優點很明顯，就是相容各種瀏覽器

JSONP

原理就是<script>這個是可以跨域的，不受同源策略限制，所以可以使用請求一段js程式碼，不過這種方法的限制比較明顯只能使用GET方法，因此實際開發中的使用有一定侷限