跨域与JSONPContents目录了解同源策略和跨域JSONP案例-淘宝搜索防抖和节流1.了解同源策略和跨域1.1同源策略如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。例如，下表给出了相对于http://www.test.com/index.html页面的同源检测：1.什么是同源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是同源（协议、域名、端口相同）1.了解同源策略和跨域1.1同源策略同源策略（英文全称Sameoriginpolicy）是浏览器提供的一个安全功能。2.什么是同源策略MDN官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通俗的理解：浏览器规定，A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互，例如：①无法读取非同源网页的Cookie、LocalStorage和IndexedDB②无法接触非同源网页的DOM③无法向非同源地址发送Ajax请求1.了解同源策略和跨域1.2跨域同源指的是两个URL的协议、域名、端口一致，反之，则是跨域。出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互。网页：http://www.test.com/index.html接口：http://www.api.com/userlist1.什么是跨域http://www.test.com/index.html浏览器1.了解同源策略和跨域1.2跨域注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！2.浏览器对跨域请求的拦截http://www.api.com/books浏览器能正常接收到跨域响应的数据Ajax网页同源策略跨域请求可以正常发起1.了解同源策略和跨域1.2跨域现如今，实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS。JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持GET请求，不支持POST请求。CORS：出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。3.如何实现跨域数据请求Contents目录了解同源策略和跨域JSONP案例-淘宝搜索防抖和节流2.JSONP2.1什么是JSONP...
