js高级--jsonp跨域

一．ajax的同源策略

Ajax请求限制：

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

XMLHttpRequest

fetch() 封装了ajax

同源策略：

什么叫做同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
http://www.example.com/dir/page.html
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）

什么叫同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源

同源策略的目的

同源策略是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

二．jsonp跨域

使用JSONP解决同源限制问题

jsonp的原理：页面上的很多标签比如src，href，都不会受到同源策略的影响

有一些标签天生就有跨域能力，比如：img，link，iframe，script

jsonp就是利用<script>的src来实现跨域获取数据的，只支持get请求

jsonp 由两部分组成：回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

将不同源的服务器端请求地址写在 script 标签的 src 属性中
```
 <script src="www.example.com"></script>
```
服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
```
 const data = 'fn({name: "张三", age: "20"})';echo data;
```
在客户端全局作用域
```
function fn(data){}
```
在fn函数内部对服务器端返回的数据进行处理
```
function fn(data){console.log(data);
}
```

整体实现思路：

客户端需要将函数名称传递到服务器端
将script请求的发送变成动态的请求。

 <script>function fn(data){console.log(data);}
//  接收后端响应的数据
</script><script src="data.php?callback=fn"></script>

后端：

<?php$cb = $_GET['callback']; //接收前端的参数：callback  fn$data = "i am back";echo $cb.'("'.$data.'")'; // fn('123')
?>echo '字符串'

高级版实现：

 <script>function fn1(data) {console.log('客户端的fn函数被调用了');console.log(data);}function add(){// 创建srcipt标签var oSrc = document.createElement('script');oSrc.src = 'http://192.168.52.1/workspace/demo/code3/data.php?callback=fn1';document.body.appendChild(oSrc);// 监听script标签什么时间加载完成，oSrc.onload = function(){oSrc.remove();}}</script>

高级封装

1. 客户端需要将函数名称传递到服务器端
2. 将script请求的发送变成动态请求
3. 封装jsonp函数，方便请求发送

<script>function add() {jsonp({url: 'http://192.168.52.1/workspace/data.php',data:{},success:function(data){console.log(data);}})}function jsonp(options) {var script = document.createElement('script');var fn = 'myscript'+Math.random().toString().replace('.','');//生成随机函数名window[fn]=options.success;script.src = options.url+'?callback='+fn+getParams(options.data);document.body.appendChild(script);// 监听script标签什么时间加载完成，script.onload = function () {script.remove();}}function getParams(obj){var arr = [];for(var k in obj){arr.push(k+'='+obj[k]);}return arr;}</script>

三．服务器端跨域

CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

前端请求地址：

http://192.168.52.1/workspace/day05/cros.php

后端设置：

 Access-Control-Allow-Origin: 'http://localhost:3000'Access-Control-Allow-Origin: '*'

header(‘Access-Control-Allow-Origin: *’);
如果想设置只允许某个网站通过的话可以这样设置
header(’Access-Control-Allow-Origin: http://test.com‘); // 允许test.com发起的跨域请求,其他的都不通过

六. 请求天气预报

接口文档：

      请求方式：GET     请求地址: 'https://wis.qq.com/weather/common',必要参数：province: "陕西省",city: "西安市",source:'pc',weather_type:'forecast_1h'

搜索框自动搜索

<!DOCTYPE html>
<html><head><title></title><meta http-equiv="content-type" content="text/html; charset=utf-8">
</head><body><input type="text"><script src="./jsonp.js"></script><script>var oTxt = document.querySelector('input')oTxt.oninput = function () {jsonp({type:'GET',url: 'https://suggest.taobao.com/sug',data: {q: this.value,},success: function (data) {console.log(data);}})}</script>
</body></html>