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);
}