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事件：传输结束，可是不知道成功仍是失败。