jsonp学习笔记

同源政策

ajax请求限制

• 由于浏览器的安全保护机制导致ajax请求只能向自己的服务器发送请求
• 比如有A网站，B网站，A网站中的ajax只能向A网站服务器发送请求，B网站中的ajax只能向B网站服务器发送请求，但是A网站中的ajax不能能向B网站服务器发送请求，B网站中的ajax不能能向A网站服务器发送请求

什么是同源

• 如果两个页面拥有相同的协议、域名和端口，这两个页面就属于同源，只要有一 个不同就不是同源

  http://www.aaa.com/dir/page.html

  • http://www.aaa.com/dir/other.html：同源
  • http://bbb.com/dir/other.html：不同源（域名不同）
  • http://www.aaa.com:81/dir/other.html：不同源（端口不同）
  • https://www.aaa.com/dir/page.html：不同源（协议不同）

同源政策为了保证用户信息的安全，防止恶意的网站窃取数据
不同源请求，可以使用 JSONP 解决同源限制问题

JSONP

• Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
• 为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
• 它不属于 Ajax 请求，但它可以模拟 Ajax 请求。利用标签中的src的特点访问完成跨域请求服务器

jsonp封装

function jsonp(options){
	//创建script标签
 	var script =document.createElement('script')
 	//生成随机函数名
 	var fnName='jsonp'+Math.random().toString().replace('.','')+new Date().getTime()
 	//将生成的函数名挂载到全局对象window中,属性值为options中回调函数success
 	window[fnName]=options.success
 	//因为请求地址携带的参数可能有多个所以需要对参数进行处理
 	var params=''//参数
 	for(var attr in options.data){
 		params+='&'+attr+'='+options.data[attr]
 	}
 	//将拼接好的参数追击到script的src中
 	script.src=options.url+'?callback='+fnName+params;
 	//将script标签添加到页面中
 	document.body.appendChild(script)
 	//为了避免每一次请求都会添加script标签所以需要在请求完成后删除script标签
 	script.onload=function(){
		//移除script标签
		document.body.removeChild(this)
	}
}