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

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