Ajax(2)

Ajax上传

上传只能用post的方式，并且后台需要处理中文

         ajax对象.upload.onprogress   上传的进度事件

              e.loaded 已经上传文件的大小

              e.total  总文件的大小

         new FormData()     用来创建与表单格式相同的数据，它是由XMLHttpRequest 2级定义。

         FormData对象.append(文件名,文件值);//这里的文件值获取到的是一个二进制数据

           文件上传DOM对象.files   上传选中的所有文件列表，放在type为file的表单控件中

         对象里包括：最后修改的时间、大小、类型等等文件信息

跨域

两个不同域名下的数据进行交互。Ajax之所以不能跨域其实是因为XMLHttpRequest受到同源策略的限制，只能让它访问同源下的数据，不能访问不同源下的数据

同源策略

  每个网站只能读取同一来源的数据，这里的同一来源指的是主机名(域名)、协议(http/https)和端口号的组合。在没明确授权的情况下，不能读写对方的资源，它是浏览器最核心也最基本的安全功能              

   源：协议、端口、域名    （只要不同源就跨域）

协议                 

http超文本协议

https   HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全

file  本地协议

ftp      文件共享协议

端口 ：相当于酒店里一层的房间

域名       假设网站A的域名是：http://www.a.com/                   

下面是网站A的ajax数据源地址：

            http://www.a.com/c/d.html        请求成功   

            http://www.a.com/d/e/f.html      请求成功   

            https://www.a.com/a/c.html       请求失败  协议不同，跨域了

            http://www.a.com:81/a/c.html    请求失败  端口不同，跨域了

            http://www.b.com/a/b.html        请求失败  主机名不同，跨域了

  

跨域解决办法

                1、在标准浏览器下XMLHttpRequest配合后端设置一个请求权限

                   在php里写上  header('Access-Control-Allow-Origin:*');

                   这个是XMLHttpRequest 2级支持的，非标准浏览器不支持

                2、服务器代理

                   服务器文件可以访问你想要的资源，而你又能访问服务器文件，所以你就可以访问想要的资源

                   缺点：如果想访问的资源需求有变，对于后端的开发成本就很大

                3、iframe、flash、postMessage、WebSocket

                   http://www.freebuf.com/articles/web/65468.htm          

jsonp

jsonp也是一种跨域获取数据的方式，

跨域获取数据的原理：带src属性的<script><img><iframe><link>等标签是不需要遵守同源策略的，但是通过src加载的资源，浏览器限制了javascript的权限，只能读不能写      

注意：

       1、通过script标签引入某些数据，是同步模式的，只有上面的代码加载完成才能继续加载下面的代码一般在用script标签做跨域的时候，不建议将数据提前加载，应该按需加载

        2、当需要数据的时候创建一个script标签，将需要的数据放在src中，通过onload去监听是否请求过来，请求完毕就调用传回来的数据（异步加载）

        3、jsonp不能用post请求只能用get方式请求