前言
- ajax不支持用 JSONP(JSON with Padding) 跨域发起 post 请求
- html在线运行
https://www.runoob.com/runcode
ajax 为什么不支持用 jsonp 跨域发起 post 请求?
因为 jsonp 的实现方式,导致 jsonp 无法发起 post 请求,实在是力不从心呐。
JSONP的最基本的原理是:动态添加一个
<script>
标签,而script标签的src属性是没有跨域的限制的。
简单说一下,想了解更多看一下后面的参考或者自行网上查找:
- 假定需求为:使用 jsonp 方式访问douban的接口
https://wthrcdn.etouch.cn/weather_mini?citykey=101090101&callback=callback
。该接口的返回内容为:
说明:
- 该接口返回的内容有个特征,为:
callback(xxx);
,将上述内容与https://wthrcdn.etouch.cn/weather_mini?citykey=101090101
接口对比一下接口看出不同来了。
- 网页代码
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
</body>
<script type="text/javascript">
function callback(res){
success(res.data);
}
function success(res){
alert(JSON.stringify(res));
}
</script>
<script src='https://wthrcdn.etouch.cn/weather_mini?citykey=101090101&callback=callback' type="text/javascript" charset="UTF-8"></script>
</script>
</html>
- 在线运行:
https://www.runoob.com/runcode
- 将上述代码改为使用 ajax 调用。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
$.ajax({
url: "https://wthrcdn.etouch.cn/weather_mini",
data: {citykey:'101090101'},
dataType:'jsonp',
jsonpCallback:'callback',
success: function(res) {
alert(JSON.stringify(res));
}
});
</script>
</script>
</html>
说明:
- 在线运行效果不变。
怎么才能在跨域请求时,发起 post 请求呢?
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
参考
JSONP 原理介绍
https://blog.csdn.net/z69183787/article/details/19191385
JSONP 技术介绍
https://www.cnblogs.com/fnz0/p/6778503.html
https://blog.csdn.net/qq_39043923/article/details/88681807
https://blog.csdn.net/u010200636/article/details/83060249
非 JSONP 的跨域方案
https://www.cnblogs.com/guaishushulz/p/6707707.html
天气预报接口
http://wthrcdn.etouch.cn/weather_mini?citykey=101090101&callback=callback