同源与跨域访问请求

JS新特性

H5新增存储方案

1.SessionStorage和LocalStorage简介
和Cookie一样, SessionStorage和LocalStorage也是用于存储网页中的数据的

2.Cookie、 SessionStorage、LocalStorage区别
2.1生命周期(同一浏览器下)
Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间
SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间
LocalStorage生命周期: 除非被清除，否则永久保存

​ 2.2容量
​ Cookie容量: 有大小(4KB左右)和个数(20~50)限制
​ SessionStorage容量: 有大小限制(5M左右) 老外写的SessionStorage支撑测试
​ LocalStorage容量: 有大小限制(5M左右) 老外写的LocalStorage支撑测试

​ 2.3网络请求
​ Cookie网络请求: 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
​ SessionStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
​ LocalStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信

3.Cookie、 SessionStorage、LocalStorage应用场景
Cookie: 判断用户是否登录
LocalStorage: 购物车
sessionStorage: 表单数据

4.注意点:
无论通过以上哪种方式存储的数据, 切记不能将敏感数据直接存储到本地

示例:

// 存储cookie
document.cookie = "myName=hhh;path=/;domain=127.0.0.1;";

//存储sessionStorage,删除sessionStorage,清空sessionStorage
sessionStorage.setItem("age", "34");
sessionStorage.removeItem("age");
sessionStorage.clear();

//存储localStorage,删除localStorage,清空localStorage
localStorage.setItem("name", "lnj");
localStorage.removeItem("name");
localStorage.clear();

同源策略

1.什么是同源策略?
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能
所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域

​ http://www.baidu.com:80/index.html
​ 协议: http/https/…
​ 一级域名: baidu.com/taobao.com
​ 二级域名: www/study/edu/…
​ 端口号: 80/3306/…

// 协议+一级域名+二级域名+端口号都相同, 所以同源
http://www.it666.com:80/index.html
http://www.it666.com:80/detail.html

// 协议不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
https://www.it666.com:80/index.html

// 一级域名不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://www.itzb.com:80/index.html

// 二级域名不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://edu.it666.com:80/index.html

// 端口号不同, 所以不同源, 是跨域
http://www.it666.com:80/index.html
http://www.it666.com:8090/index.html

//ajax默认同源
        $.ajax({
            url:"http://127.0.0.1:80/jQuery/Ajax/xxx.php",
            success: function (msg) {
                console.log(msg);
            },
            error: function () {
                console.log("请求失败");
            }
        });

2.同源策略带来的影响
在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据
但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的
这时如果再通过Ajax请求数据就会拿不到跨域数据

3.跨域解决方案(除第一种 剩下的基本不用了)
jsonp
document.domain+iframe
location.hash + iframe
window.name + iframe
window.postMessage
flash等第三方插件

JSONP

1. 什么是JSONP?
   JSONP让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据
2. JSONP实现跨域访问的原理
   2.1 在同一界面中可以定义多个script标签
   2.2 同一个界面中多个script标签中的数据可以相互访问
   2.3 可以通过script的src属性导入其它资源
   2.4 通过src属性导入其它资源的本质就是将资源拷贝到script标签中
   2.5 script的src属性不仅能导入本地资源, 还能导入远程资源
   2.6 由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
    
<script src="http://127.0.0.1:80/jQuery/Ajax/xx.php">
    
/*
    当前网页的地址: http://127.0.0.1:63342/jQuery/Ajax/jsonp%E5%8E%9F%E7%90%86.html
    远程资源的地址: http://127.0.0.1:80/jQuery/Ajax/jsonp.php
*/
    
	/*
    优化一
    1.在企业开发中通过JSONP来获取跨域的数据,
    	一般情况下服务器返回的都不会是一个变量, 而是一个函数的调用
    */

    /*
    优化二
    2.当前服务器返回的函数调用名称写死了 例如服务前返回demo() ,那么本地就必须有一个
    	服务器返回函数叫什么名称, 我们本地就必须定义一个叫什么名称的函数
    	
    	解决方案:
    	通过URL参数的方式来动态指定函数名称
    	例:http://127.0.0.1:80/jQuery/Ajax/20-jsonp.php?cb=test
    	cb=test就是指定返回的函数调用名为test,后台获取到就可以定义一个test方法返回
    */

    /*
    优化三
    3.由于script标签默认是同步, 前面的script标签没有加载完数据, 后面的script标签就不会被执行
    所以请求数据的script标签必须放到后面
    
    	解决方案:
    	通过JS动态创建script标签, 因为JS动态创建的script标签默认就是异步的,
    	不用等到前面的标签加载完就可以执行后面的script标签
    */
    let oScript = document.createElement("script");
    oScript.src = "http://127.0.0.1:80/jQuery/Ajax/20-jsonp.php?cb=test";
    document.body.appendChild(oScript);
   

jQuery中jsonp使用

$.ajax({
    url: "http://127.0.0.1:80/jQuery/Ajax/jsonp.php",
    data:{
        "name": "wst",
        "age": 21
    },
    dataType: "jsonp", // 告诉jQuery需要请求跨域的数据
    jsonp: "cb",  // 告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取
    jsonpCallback: "wst", // 告诉jQuery服务器在获取回调函数名称的时候回调函数的名称是什么
    success: function (msg) {
        console.log(msg);
    }
});

jQuery封装JSONP原理

//自己封装的jsonp
function obj2str(obj) {
    // 生成随机因子
    obj.t = (Math.random() + "").replace(".", "");
    let arr = [];
    for(let key in obj){
        arr.push(key + "=" + encodeURI(obj[key]));
    }
    let str = arr.join("&");
    // console.log(str);
    return str;
}
function myJSONP(options) {
    options = options || {};
    // http://127.0.0.1/jQuery/Ajax/jsonp.php?cb=wst&name=wst&age=21&_=1559735634387
    // http://127.0.0.1/jQuery/Ajax/jsonp.php?cb=wst&name=wst&age=21&t=08520581619221432
    // 1.生成URL地址
    let url = options.url;
    if(options.jsonp){
        url += "?" + options.jsonp + "=";
    }else{
        url += "?callback=";
    }

    let callbackName = ("jQuery" + Math.random()).replace(".", "");
    if(options.jsonpCallback){
        callbackName = options.jsonpCallback;
        url += options.jsonpCallback;
    }else{
        // console.log(callbackName);
        url += callbackName;
    }
    if(options.data){
        let str = obj2str(options.data);
        url += "&" + str;
    }
    // console.log(url);

    // 2.获取跨域的数据
    let oScript = document.createElement("script");
    oScript.src = url;
    document.body.appendChild(oScript);

    // 3.定义回调函数
    window[callbackName] = function (data) {
        // 删除已经获取了数据的script标签
        document.body.removeChild(oScript);
        // 将获取到的数据返回给外界
        options.success(data);
    }
}


//调用自己定义的jsonp
myJSONP({
        url: "http://127.0.0.1:80/jQuery/Ajax/jsonp.php",
        data:{
            "name": "wst",
            "age": 21
        },
        jsonp: "cb",  // 告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取
        jsonpCallback: "wst", // 告诉jQuery服务器在获取回调函数名称的时候回调函数的名称是什么
        success: function (msg) {
            console.log(msg);
        }
    });