JavaScript学习Day22笔记

Day22笔记

一、什么是跨域

​ 当浏览器从一个网页的URL地址去请求另一个网页URL的地址时，如果协议、域名、端口三者之间任意一个与当前页面的URL不同，都会引起跨域。

注：localhost和本机的IP地址虽然都指向本机，但也属于跨域。

二、引起跨域的原因

1. 浏览器安全限制
2. 同源策略
3. XHR(XMLHttpRequest)请求

三、同源策略

​ 同源策略时由NetScape网景公司提出第一个著名的安全策略，现在所有支持JavaScript的浏览器都会使用这个策略。限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。

1. 无法读取非同源网页的Cookie、LocalStroage和IndexedDB。
2. 无法接触非同源网页的DOM。
3. 无法向非同源地址发送AJAX请求。

四、JSONP

• JSONP是一种非正式传输协议，也是常用的跨域手段。

• <img>的src、<link>的href等这些方法都不符合同源策略，但它们都实现了跨域获取数据。

• JSONP实现跨域的方法：动态创建<script>标签，然后利用src不受同源策略的约束来获取数据。

  let scriptEle = document.createElement('script');
  scriptEle.src = "http://www.baidu.com/api?callback=callback";
  document.body.appendChild(scriptEle);
  

• 该协议允许用户传递一个callback参数给服务器，然后服务器返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

  // 返回的JSON作为参数传入回调函数中，我们通过回调函数来操作数据。
  function callback(data) {
      // 对获取到的data数据进行操作代码
  }
  

• JSONP仅仅用于GET请求，只支持JS脚本和JSON格式的数据。

五、COOKIE

• HTTP是一种无状态协议，即每次服务器收到客户端请求时，都是一个全新的请求，服务器并不知道客户端的历史请求记录，cookie就是为了弥补HTTP的无状态特性。

• cookie是保存在客户端的纯文本文件，比如TXT文件。

• cookie文件必须由浏览器支持，在浏览器中可以设置阻止cookie，这样服务器就不能写入cookie到客户端。

• cookie是以字符串的形式存储，在字符串中以键值对的形式出现。

  // cookie的形态
  'key1=value1;key2=value2'
  

cookie的特点

• 存储大小限制：4KB。
• 存储数量限制：50条。
• 存储时效性：由过期时间，一般是会话级别（浏览器关闭就过期）。
• 域名限制：谁设置的谁才能读取。

cookie的使用

• 读取cookie的内容

  const cookie = document.cookie;
  console.log(cookie);
  

• 设置一个时效性为会话级别的cookie

  document.cookie = 'key=value';
  

• 给cookie设置过期时间

  document.cookie = 'key=value;expires=time'
  // time  =>  时间对象
  // time的两种格式  => new Date()声明的时间格式
  //cookie使用的是世界标准世界，而我们使用的new Date()是中国所在的+8时区，我们需要减去这8小时再设置cookie时间。
  

• 删除cookie

  // cookie不能直接删除
  // 所以我们只能把某一条cookie的时间设置成过期时间
  // 那么浏览器会自动删除cookie
  document.cookie = 'key=value;expires=-1'