解决跨域（一）--- JSONP

JSONP原理及实现

• JSONP全称JSON with padding，用于解决ajax跨域问题的一种方案。
• 由于同源策略的限制，浏览器只允许XMLHTTPRequest请求当前源（协议、域名、端口）的资源，而对请求script资源没有限制。
• 通过请求script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，这种跨域的数据方式被称为JSONP。
• 基本思想是，网页通过添加一个script元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

	function addScriptTag(src) {
       var script = document.createElement('script');
       script.setAttribute('type','text/javascript');
       script.src = src;
       document.body.appendChild(script);
   };
   window.onload = function(){
       addScriptTag('http://example.com/ip?callback=foo');
   };
   function foo(data){
       console.log('Your public IP address is:' + data.ip);
   };
	foo({
       "ip":"8.8.8.8"
   })

上面的代码通过动态添加script元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，
用来指定回调函数的名字，这对于JSONP是必需的。
服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

JSONP和AJAX对比：

• JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）

JSONP优缺点：

• JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。