AJAX-跨域

1.名词解释

域：空间，范围，同源

同源策略

一种浏览器的安全策略，是浏览器的最基本的安全功能。

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

所谓同源是指，域名，协议，端口相同。

域名

服务器ip地址的别名，IP地址绑定后访问这个域名就相当于访问了这个IP地址

协议

网络设备之间的通信协议，双方实体完成通信或服务所必须遵循的规则和约定。
http/https（网络浏览协议）
ftp（文件共享协议）
file（本地协议）
可以通过winwow.location.hostName
可以通过修改host地址访问测试环境

端口

一种网络传输口
80：www
21:ftp

只要不同源就会出现跨域情况

2.解决跨域问题

2.1 后端提高权限

标准浏览器的XMLHttpRequest() + 后端文件设置请求头权限（HTML5）新API
低版本浏览器的XMLHttpRequest()不支持与后端配合

2.2 后端代理

后端先把数据请求到当前服务器，然后前端使用ajax去请求后端数据

弊端：会对开发项目造成不稳定影响（请求地址页面发生了改变，自己的页面也会发生改变）

2.3 flash跨域

flash快要死了，不管它

2.4 ifream

2.5 jsonp

json+padding ,填充式的json。
jsonp的实质，是后端调用了一个函数，然后传入了实参，在本页面就需要一个同名的函数去接收数据。这个函数必须放在全局

• 1.创建一个script标签
• 2.给src设置请求地址
• 3.将script标签放在head中

后端设置一个回调函数就可以让前端修改函数名。
前端声明函数，后端传入实参，前端执行函数。

jsonp的缺点：
ajax的数据jsonp无法使用，但是jsonp的数据ajax是可以用的。
jsonp只能通过get请求，不能使用post。

ajax的缺点：
无法返回上一次操作

3. 封装JSONP

function jsonp(json){
    var sd;
    var settings = {
        url:json.url || '',
        data:json.data || {},
        succ:json.succ || '',
        cbName:json.cbName || 'callback',
        callback:json.callback || 'jQuery'+new Date().getTime(),
        fail:json.fail || ''
    };
    var timer = null;
    var head = document.getElementsByTagName('head')[0];
    //创建的script标签的src = 传进来的url + fn3... 
    var oS = document.createElement('script');
    oS.className = 'error';
    settings.data[settings.cbName] = settings.callback;
    var arr = [];
    for(var attr in settings.data){
        arr.push(attr+'='+settings.data[attr]);
    }
    settings.data = arr.join('&');
    oS.src = settings.url + '?' + settings.data;
    head.appendChild(oS);
    //因为接受的函数必须挂在window下（全局）,所以才用window[callback]，callback又是可变的，所有用[]
    window[settings.callback] = function(json){
        //为了清除失败的那个定时器 
        clearTimeout(timer);
        //遗留下来的script标签 
        error = head.getElementsByClassName('error');
        //找到所有class名为error的script标签,并且清除掉
        for(var i=0,len=error.length;i