P2-23js-同源组，跨域，jsonp

浏览器的 同源组策略

• 浏览器安全防护的一种机制，它规定：Ajax请求地址与当前页面的地址必须得是同协议，同主机，同端口才可以正常发送Ajax请求，这三者有任何一个不一样，则判定此次请求是跨域请求，浏览器会阻止跨域请求行为。
• 浏览器安全防护的一种机制，它规定：一个来自某个服务器的静态文件不允许向另外一台跨域服务器发送Ajax请求。只有主机名，协议名，端口号三者都一致的情况下才会被视作是同域（或一台服务器），只要三者有任何一个不一样，则判定此次请求是跨域请求，那么这个Ajax请求就会被同源组策略所阻止。

为什么要解决跨域请求

• 浏览器同源组策略，会阻止跨域请求行为。为了实现功能，要绕过同源组策略

解决跨域请求的方法

• 1. CORS(后端独立解决)
• 2. 服务器反向代理(后端独立解决)
• 3. JSONP(前后端协作)

ajxs发送请求，后端返回的是json字符串，需要转成json对象使用----jsonp发送的请求，返回的是json对象

JSONP的工作机制

• 一种解决跨域问题的方法(不是一套标准技术)。

• 工作机制第一种表述：前端利用动态创建一个script标签并利用它的src属性向服务器发送一次HTTP请求,并提前声明好一个回调函数，回调函数的函数名利用callback请求参数传递给后端。后端接收到来自前端的请求后，获取callback请求的请求参数并拼接一个调用函数的JS代码段并将要返回给前端的数据以实参的形式存在。前端接收到来自后端的响应后，会将后端的返回内容当做JS代码来执行即调用一个函数，并用一个形参来接收后端要传递过来的数据。

• 工作机制第二种表述:前端利用动态创建一个script标签利用它的src属性向后端发送一个HTTP请求，并且提前准备好一个回调函数，回调函数的函数名利用callback请求参数传递给后端。后端接收到来自前端发送请求后，拆解出callback参数的参数值并且以此为函数名拼接一段执行调用函数的JS代码段返回给前端并把数据当做这个函数的实参一并发送。前端接收到执行函数的代码段后会自动调用之前声明的回调函数，回调函数中的形参就代表后端返回的数据(形参接收后端要传递过来的数据)。

JSONP的代码

// 回调函数(为全局函数)：当成功接收到来自后端的响应之后会自动调用这个函数，并且该函数中的形参就代表了
//后端要返回的数据，**后端传入实参：是json对象**
function jsonpcallback(data){
    
    
	console.log(data[0])	
}
//事件
query.onclick = function(){
    
    
	//1.动态创建script标签
	let script = document.createElement('script');
	//自定义一个属性(属性，属性值)，请求放入属性值中,函数名通过属性值中网址的参数发送到后端
	script.setAttribute('src',"http://10.35.161.142/data.php?callback=jsonpcallback&name="+queryname.value)
	//插入动态创建的元素
	$("body").appendChild(script)
}

案例

• 天气预报(接口yiketianqi.com)

---