原生js及JQuery中用jsonp解决跨域请求的用法

最新推荐文章于 2023-07-12 16:55:05 发布

wei_ke_zhi

最新推荐文章于 2023-07-12 16:55:05 发布

阅读量518

点赞数

分类专栏： ajax 跨域请求

本文链接：https://blog.csdn.net/wei_ke_zhi/article/details/81627665

版权

ajax 跨域请求专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、什么是跨域？

浏览器跨域请求时报的错误形式如图：

由于浏览器同源策略，凡是发送请求url的协议，路径，端口三者之间的任意一个与当前页面的不同，即为跨域。

2、原生js的解决方式

jsonp的方式主要是通过动态插入一个script标签，浏览器对script的资源引用没有限制，同是资源加载到页面后会立即执行（没有阻塞的齐纳提下）。

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost:8888/jsonp?callback=f';
    document.head.appendChild(script);
</script>

下面是一个实例：

<script>
		//定义一个数据解析函数
		function weather(data) {
			var d = data.weather;
			var info = document.getElementById("info");
			info.innerHTML = '';

			for (var i = 0; i < d.length; i++) {
				var data = d[i].data;
				var div = document.createElement("div");
				div.innerHTML = data;
				info.appendChild(div);
			}
		}
		//跨域请求解决办法jsonp
		window.onload = function() {
			var city = document.getElementById("city");
			city.onchange = function() {
				document.getElementById("info").innerHTML = "";
			}
			var checkWeather = document.getElementById("checkWeather");
			checkWeather.onclick = function() {
				var cityVal = city.value;
				var url = "http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=weather&code="+cityVal;
				var script = document.createElement('script');
				script.src = url;
				document.body.appendChild(script);
			}
		}

需要注意的是：定义的解析函数的函数与跨域请求的天气链接中的那个jsonp的参数值是对应的，必须要一样。

而在_jsonp=weather,这两个参数都是可以定义的。

下面我们自己写一个简单的例子解释一下，怎么去定义"_jsonp"与"weather"这两个参数。

上图中绿色部分有个错误：文件返回的值的形式是：cb(["zhangsan","lishi","zhaoliu"]) ;

3、jQuery的jsonp的格式

参数jsonp的值用来定义url路径中的键名（也就是参数名），参数jsonpCallback用来定义键值（参数值），也就是解析函数名，此参数若不定义，那么后台会随机定义为（JQuery + 一串数字）。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery跨域jsonp</title>
</head>
<body>
<input type="button" id="btn" value="点击">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	$.ajax({
		type : "get",
		async: false,
		url : "./jsonp.php?qwe=liudehua",
		dataType : "jsonp",
		//jsonp: "qwe",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
		//jsonpCallback:"liudehua",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(类似：jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);)
		success : function(data){
		    console.log(data);
		},
		error:function(){
		    console.log('fail');
		}
	});
});
</script>
</body>
</html>

缺点：（1）只支持get请求，无法进行post请求。

（2）要确定jsonp的请求是否失败，大多数框架的实现都是结合超时时间来判定的

wei_ke_zhi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js及JQuery中用jsonp解决跨域请求的用法

1、什么是跨域？浏览器跨域请求时报的错误形式如图：由于浏览器同源策略，凡是发送请求url的协议，路径，端口三者之间的任意一个与当前页面的不同，即为跨域。2、原生js的解决方式jsonp的方式主要是通过动态插入一个script标签，浏览器对script的资源引用没有限制，同是资源加载到页面后会立即执行（没有阻塞的齐纳提下）。&lt;script&gt; var ...
复制链接

扫一扫

专栏目录