xmlHttpRequest 跨域和上传或下载进度条
2015-03-31 11:19
92 查看
跨域 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事件,用来返回进度信息。它分成上传和下载两种情况
1)下载的progress事件属于XMLHttpRequest对象
2)上传的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事件:传输结束,但是不知道成功还是失败。
相关文章推荐
- 详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
- 详细解读XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
- 详细解读XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
- IOS网络通信之ASIHttpRequest下载/上传进度的追踪
- XMLHttpRequest上传文件实现进度条
- XMLHttpRequest上传文件实现进度条
- XMLHttpRequest上传文件,并显示进度条
- html5 XMLHttpRequest 头像上传带进度
- 解决ajax XMLHttpRequest 跨域上传文件失败问题
- [Javascript]XMLHttpRequest对象实现下载进度条
- 1次ajax请求(XMLHttpRequest)上传多个文件,支持进度条
- XMLHttpRequest文件上传,并显示进度条
- 使用 new XMLHttpRequest() 制作下载文件进度条
- AJAX(XMLHttpRequest)进行跨域请求方法详解(三)
- AJAX(XMLHttpRequest)跨域请求笔记(一)
- AJAX(XMLHttpRequest)进行跨域请求方法详解(一)
- C# HttpWebRequest可断点上传,下载文件;SOCKET多线程多管道可断点传送大文件
- AJAX(XMLHttpRequest)进行跨域请求方法详解(三)
- AJAX(XMLHttpRequest)进行跨域请求方法详解(二)
- AJAX(XMLHttpRequest)进行跨域请求方法详解(二)