• 跨域和同源

    同源

    同源：两个页面的协议、域名和端口相同，则认为他们具有相同的源

    示例：对http://www.test.com/index.html页面进行同源检测

    URL是否同源原因
    http://www.test.com/other.html是同源（端口、域名、端口相同）
    https://www.test.com/about.html否协议不同（http与https）
    http://blog.test.com/movie.html否域名不同（www.test.com与blog.test.com）
    http://www.test.com:7001/home.html否端口不同（默认的80端口与7001端口）
    http://www.test.com:80/main.html是同源（端口、域名、端口相同）

    同源策略

    全称Same origin policy 是浏览器提供的一个安全功能

    目的：隔离一些潜在的恶意文件

    浏览器规定A网站的JavaScript不允许和非同源的网站c之间进行资源的交互

    跨域

    不同源就是跨域 根本原因就是浏览器的同源策略导致的

    浏览器对跨域请求的拦截

    Ajax能对服务器发起请求，服务器也能正常接收并返回，但是返回到浏览器被同源策略拦截，无法被页面获取

    实现跨域数据请求

    最主要的两种解决方案是JSONP和CORS

    JSONP：出现早，兼容性好 缺点是只支持GET请求

    CORS：W3C标准，属于跨域Ajax请求的根本解决方案，不兼容低版本浏览器

    JSONP（JSON with padding）

    是JSON的一种‘使用模式’，用于解决主流浏览器的跨域数据访问问题

    实现原理：（因为

  •    <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=ls&age=30">script>

    • 注：JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest这个对象，发起的是一种js脚本类的请求

    jQuery中的JSONP

    示例：

    1.  // 发起JSONP请求
    2.  $.ajax({
    3.    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    4.    // 代表我们要发起JSONP请求
    5.    dataType: 'jsonp',
    6.    //发送到服务器端的参数名称，默认值为 callback
    7.    jsonp:'callback',
    8.    //自定义的回调函数名称，默认值为jQueryxxx格式
    9.    jsonpCallback:'abc',
    10.    success: function(res) {
    11.       console.log(res);
    12.     }
    13.  })

    默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数，jQuery是随机生成的一个回调函数名称

    实现过程：jQuery采用的是动态创建和移除