jsonp跨域请求基本原理

一、什么是jsonp

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，是一种轻量级的数据传输格式。可以让网页从别的域名（网站）那获取资料，即跨域读取数据，被广泛应用于当前Web应用中。

二、jsonp原理

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

注：同源策略是浏览器的一种安全的策略,所谓的同源是指浏览器请求的url地址中协议,域名,端口都相同, 只要其中一个不同就是跨域;同源策略主要为了保证浏览器的安全性

三、jsonp具体实现

1、jsonp解决跨域请求

 window.onload=function(){
				var btn=document.getElementById('btn');
				btn.onclick=function(){
					
					ajax({
						type:'get',
						url:'http://www.example2.com/deg.php',
						dataType:'jsonp',
						success:function(data){
							console.log(data)
						}
					})
				}
			} 

//jQuery方法
$(function(){
				$('#btn').click(function(){
					$.ajax({
						type:'get',
						url:'http://www.example2.com/ky1.php',
						dataType:'jsonp',
						jsonp:'cb',//可修改
						jsonpCallback:'abc',//修改回调函数名称
						success:function(data){
							console.log(data)
						}
					})
				})
			})

2.其它跨域请求方法
a、静态script标签的src属性，进行跨域请求

//直接通过script标签的scr属性请求
<script type="text/javascript" src="http://www.example2.com/deg.php?callback=hello"></script>

b、动态script标签的src属性，发送跨域请求

<script type="text/javascript">
			var script=document.createElement('script');
			script.src='http://www.example2.com/deg.php?cb=hello&username=admin&password=123';
			var head=document.getElementsByTagName('head')[0];
			head.appendChild(script);//dom操作方法  添加元素
			function hello(data){
				console.log(data)
			}

注：在php中,单引号当作变量 双引号当作字符串

三、jsonp js的封装

function ajax2(obj){
	var moren={
		url:'#',
		dataType:'jsonp',
		jsonp:'callback',
		success:function(data){
			console.log(data)
		}
	}
	//新传递数据替换之前数据
	for(var key in obj){
		moren[key]=obj[key];
	}
	
	var cbname='jQuery'+('1.11.1'+Math.random()).replace(/\D/g,'')+'_'+(new Date().getTime());
      if(moren.jsonpCallback){
		  cbname=moren.jsonpCallback;
	  }
	  window[cbname]=function(data){
		  obj.success(data);
	  }
	  
	  var param='';
	  for(var attr in obj.data){
		  param+=attr+'='+obj.data[attr]+'&'
	  }
	  if(param){
		  param=param.substring(0,param.length-1);
		  param='&'+param;
	  }
	  var script=document.createElement('script');
	  script.src=moren.url+'?'+moren.jsonp+'='+cbname+param;
	  var  head=document.getElementsByTagName('head')[0];
	  head.appendChild(script);
}