JSONP

1.1 什么是同源政策？

---

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

---

• 协议相同
• 域名相同
• 端口相同

---

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。

---

• http://www.example.com/dir2/other.html：同源
• http://example.com/dir/other.html：不同源（域名不同)
• http://v2.www.example.com/dir/other.html：不同源（域名不同)
• http://www.example.com:81/dir/other.html：不同源（端口不同)

---

1.2 同源策略诞生的目的？

        同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

1.3 同源策略的限制范围

随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。

---

• Cookie、LocalStorage 和 IndexDB 无法读取。
• DOM 无法获得。
• AJAX 请求不能发送。

---

虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响。下面，我将详细介绍，如何规避上面三种限制。

---

什么是JSONP？

JSONP 英文全程（Json With Padding）,JSONP 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。因为同源策略我们从不同的域（网站）访问数据有一个特殊的技术( JSONP )。JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。它的基本思想是，网页通过添加一个

---

下面是客户端js代码

function addScriptTag(src) {
   //创建一个script标签
  var script = document.createElement('script');
  //设置script标签的type属性为text/jacascript 告诉浏览器这是一个JavaScript脚本
  script.setAttribute("type","text/javascript");
  //设置script的src属性 设置src属性之后浏览器将到指定服务器异步下载脚本
  script.src = src;
  //将新创建的script标签插入文档尾部
  document.body.appendChild(script);
 }

window.onload = function () {
   //query参数后面的callback函数名必须要一个已存在的函数名
  addScriptTag('http://example.com/ip?callback=foo');
 }

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
 };

上面代码通过动态添加

---

下面是服务器端PHP代码

header('Content-type: application/json');
//获取回调函数名 这个js函数名字由客户端的请求参数决定?callback=foo
$jsoncallback = htmlspecialchars($_REQUEST ['callback']);
//生成一个json数据
$json_data = '["ip","8.8.8.8"]'; 
//输出jsonp格式的数据 
echo $jsoncallback . "(" . $json_data . ")"; 
//相当于动态创建的script标签的src属性请求了一个js文件 但是js文件的内容只有foo({ip:"8.8.8.8"});这一段调用代码
/**
  *  <script src="xxx.js"></script>
  *
  * //xxx.js内容
  * foo({
  *     "ip":"8.8.8.8"
  *  });
  */

由于

---