xmlHttpRequest 跨域和上傳或下載進度條

跨域 XMLHttpRequest 請求

普通網頁可以使用XMLHttpRequest對象發送或者接受服務器數據, 可是它們受限於同源策略. 擴展能夠不受該限制. 任何擴展只要它先獲取了跨域請求許可，就能夠進行跨域請求。

須要特別注意的是：在請求信息中，瀏覽器使用 Origin 這個 HTTP 頭來標識該請求來自於 http://xxx:801；在返回的響應信息中，使用 Access-Control-Allow-Origin 頭來控制哪些域名的腳本能夠訪問該資源。若是設置 Access-Control-Allow-Origin:*，則容許全部域名的腳本訪問該資源。若是有多個，則只須要使用逗號分隔開便可。

Response.AddHeader("Access-Control-Allow-Origin", "http://xxx:801");

跨域容許設置可使用完整域名, 例如:

• "http://www.google.com/"
• "http://www.gmail.com/"

或者使用模式匹配, 例如:

• "http://*.google.com/"
• "http://*/"

模式匹配"http://*/" 表示能夠發起到全部域的HTTP請求. 注意在這裏, 模式匹配有點像內容腳本匹配, 可是這裏的任何域名後的路徑信息都被忽略

 

ie 下提示no transport，表示跨域，jquery.support.cors只是對CORS協議的一種實現，具體能夠看jQuery的源代碼，這裏很少說。

安全性考慮

每當使用經過XMLHttpRequest獲取的資源時, 你編寫的背景頁須要注意不要成爲跨域腳本的犧牲品. 特別注意避免使用像下面這樣的危險API:

background.html
===============
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // 警告! 這裏有可能執行了一段惡意腳本!
    var resp = eval("(" + xhr.responseText + ")");
    ...
  }
}
xhr.send();

background.html
===============
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // 警告! 這樣處理有可能被注入惡意腳本!
    document.getElementById("resp").innerHTML = xhr.responseText;
    ...
  }
}
xhr.send();

實際上咱們應該首選不會執行腳本的安全API:

background.html
===============
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON解析器不會執行攻擊者設計的腳本.
    var resp = JSON.parse(xhr.responseText);
  }
}
xhr.send();

background.html
===============
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // innerText不會給攻擊者注入HTML元素的機會.
    document.getElementById("resp").innerText = xhr.responseText;
  }
}
xhr.send();

另外在使用經過協議HTTP獲取的資源時要特別當心. 若是你開發的擴展被應用在惡意網絡環境中，網絡攻擊者(又叫 "中間人攻擊") 可能篡改服務器響應內容從而可能攻擊你編寫的擴展. 事實上，你應該儘量地首選使用HTTPS協議.

XMLHttpRequest upload 屬性（進度條）

新版本的XMLHttpRequest對象，傳送數據的時候，有一個progress事件，用來返回進度信息。

它分紅上傳和下載兩種狀況

１）下載的progress事件屬於XMLHttpRequest對象

２）上傳的progress事件屬於XMLHttpRequest.upload對象。

我 們先定義progress事件的回調函數。

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;

而後，在回調函數裏面，使用這個事件的一些屬性。

function updateProgress(event) {
    if(event.lengthComputable) { var percentComplete = event.loaded / event.total; } }

上面的代碼中，event.total是須要傳輸的總字節，event.loaded是已經傳輸的字節。若是event.lengthComputable不爲真，則event.total等於0。

與progress事件相關的，還有其餘五個事件，能夠分別指定回調函數：
* load事件：傳輸成功完成。

* abort事件：傳輸被用戶取消。

* error事件：傳輸中出現錯誤。

* loadstart事件：傳輸開始。

* loadEnd事件：傳輸結束，可是不知道成功仍是失敗。