1 同源
同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。
2 跨域
不同源则跨域
1-不允许进行DOM操作
2-不能进行ajax请求
例如http://www.example.com/
http://api.example.com/detail.html 不同源 域名不同
https//www.example.com/detail.html 不同源 协议不同
http://www.example.com:8080/detail.html 不同源 端口不同
http://api.example.com:8080/detail.html 不同源 域名、端口不同
https://api.example.com/detail.html 不同源 协议、域名不同
https://www.example.com:8080/detail.html 不同源 端口、协议不同
http://www.example.com/detail/index.html 同源 只是目录不同
3 服务器端跨域 CORS跨域:cross-origin resource sharing
header( 'Access-Control-Allow-Origin:*' );
header( 'Access-Control-Allow-Origin:http://www.study.com');
JSONP
JSON with Padding
1、原理剖析
其本质是利用了<script src=""></script>标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。
只能以GET方式请求
jQuery中的JSONP
jQuery 的$.ajax() 方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。
dataType:'jsonp' 设置dataType值为jsonp即开启跨域访问
jsonp 可以指定服务端接收的参数的“key”值,默认为callback
jsonpCallback 可以指定相应的回调函数,默认自动生成
XMLHttpRequest2.0
1 设置超时
a) 设置超时 xhr.timeout
b) 监听超时事件 xhr.ontimeout = function () {// code}
当请求超时,此事件就会被触发
2 FormData
a) 提供了一个新的内建对象,可用于管理表单数据
b) 首先要获取一个表单元素form
c) 然后在实例化时 new FormData(form),将表单元素form传进去
d) 会返回一个对象,此对象可以直接做为xhr.send(formData)的参数
e) 此时我们的数据就是以二进制形式传递了
f) 注意我们这里只能以post形式传递,浏览器会自动为我们设置一个合适的请求头
3 二进制
a) 我们上传文件是以二进制形式传递的
b) 我们可以通过表单<input type=”file”>获取到一个文件对象
c) 然后file.files[0]可以获取文件信息
d) 然后再利用var formData = new FormData() 实例化
e) 然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制
f) 最后将 formData 做为xhr.send(formData)的参数
4 上传进度
a) 利用XMLHttpRequest我们可以实现文件的上传
b) 并且我们可以通过xhr.upload.onprogress = function (ev) {// code},监听上传的进度
c) 这时我们上传的进度信息会保存在事件对象ev里
d) ev.loaded 表示已上传的大小,ev.total表示文件整体的大小
e) var percent = ev.loaded / ev.total |
|