js溫故而知新11(AJAX)——學習廖雪峯的js教程

時間 2019-12-07

原文原文鏈接

Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。html

若是仔細觀察一個Form的提交，你就會發現，一旦用戶點擊「Submit」按鈕，表單開始提交，瀏覽器就會刷新頁面，而後在新頁面裏告訴你操做是成功了仍是失敗了。若是不幸因爲網絡太慢或者其餘緣由，就會獲得一個404頁面。json

這就是Web的運做原理：一次HTTP請求對應一個頁面。api

若是要讓用戶留在當前頁面中，同時發出新的HTTP請求，就必須用JavaScript發送這個新請求，接收到數據後，再用JavaScript更新頁面，這樣一來，用戶就感受本身仍然停留在當前頁面，可是數據卻能夠不斷地更新。跨域

若是你想把標準寫法和IE寫法混在一塊兒，能夠這麼寫：瀏覽器

var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

當建立了XMLHttpRequest對象後，要先設置onreadystatechange的回調函數。在回調函數中，一般咱們只需經過readyState === 4判斷請求是否完成，若是已完成，再根據status === 200判斷是不是一個成功的響應。安全

XMLHttpRequest對象的open()方法有3個參數，第一個參數指定是GET仍是POST，第二個參數指定URL地址，第三個參數指定是否使用異步，默認是true，因此不用寫。服務器

最後調用send()方法才真正發送請求。GET請求不須要參數，POST請求須要把body部分以字符串或者FormData對象傳進去。網絡

跨域：
一是經過Flash插件發送HTTP請求，這種方式能夠繞過瀏覽器的安全限制，但必須安裝Flash，而且跟Flash交互。不過Flash用起來麻煩，並且如今用得也愈來愈少了。app

二是經過在同源域名下架設一個代理服務器來轉發，JavaScript負責把請求發送到代理服務器：異步

'/proxy?url=http://www.sina.com.cn'

代理服務器再把結果返回，這樣就遵照了瀏覽器的同源策略。這種方式麻煩之處在於須要服務器端額外作開發。

第三種方式稱爲JSONP，它有個限制，只能用GET請求，而且要求返回JavaScript。這種方式跨域其實是利用了瀏覽器容許跨域引用JavaScript資源：

<html>
<head>
    <script src="http://example.com/abc.js"></script>
    ...
</head>
<body>
...
</body>
</html>

JSONP一般以函數調用的形式返回，例如，返回JavaScript內容以下：

foo('data');

這樣一來，咱們若是在頁面中先準備好foo()函數，而後給頁面動態加一個<script>節點，至關於動態讀取外域的JavaScript資源，最後就等着接收回調了。

所以咱們須要首先在頁面中準備好回調函數：

function refreshPrice(data) {
    var p = document.getElementById('test-jsonp');
    p.innerHTML = '當前價格：' +
        data['0000001'].name +': ' + 
        data['0000001'].price + '；' +
        data['1399001'].name + ': ' +
        data['1399001'].price;
}

最後用getPrice()函數觸發：

function getPrice() {
    var
        js = document.createElement('script'),
        head = document.getElementsByTagName('head')[0];
    js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
    head.appendChild(js);
}

CORS
Cross-Origin Resource Sharing
Origin表示本域，也就是瀏覽器當前頁面的域。當JavaScript向外域（如sina.com）發起請求後，瀏覽器收到響應後，首先檢查Access-Control-Allow-Origin是否包含本域，若是是，則這次跨域請求成功，若是不是，則請求失敗，JavaScript將沒法獲取到響應的任何數據。
用一個圖來表示就是：

假設本域是my.com，外域是sina.com，只要響應頭Access-Control-Allow-Origin爲http://my.com，或者是*，本次請求就能夠成功。

可見，跨域可否成功，取決於對方服務器是否願意給你設置一個正確的Access-Control-Allow-Origin，決定權始終在對方手中。

不管你是否須要用JavaScript經過CORS跨域請求資源，你都要了解CORS的原理。最新的瀏覽器全面支持HTML5。在引用外域資源時，除了JavaScript和CSS外，都要驗證CORS。例如，當你引用了某個第三方CDN上的字體文件時：

/* CSS */
@font-face {
  font-family: 'FontAwesome';
  src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}

若是該CDN服務商未正確設置Access-Control-Allow-Origin，那麼瀏覽器沒法加載字體資源。

對於PUT、DELETE以及其餘類型如application/json的POST請求，在發送AJAX請求以前，瀏覽器會先發送一個OPTIONS請求（稱爲preflighted請求）到這個URL上，詢問目標服務器是否接受：

OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

服務器必須響應並明確指出容許的Method：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

瀏覽器確認服務器響應的Access-Control-Allow-Methods頭確實包含將要發送的AJAX請求的Method，纔會繼續發送AJAX，不然，拋出一個錯誤。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。