老师关于跨域url处理有个问题

老师关于跨域url处理有个问题

//封装JSONP
		function getJSONP(url, callback) {
			if (!url) {
				return;
			}
			//声明数组用来随机生成函数名
			var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'i', 'j'],
				r1 = Math.floor(Math.random() * 10),
				r2 = Math.floor(Math.random() * 10),
				r3 = Math.floor(Math.random() * 10),
				name = 'getJSONP' + arr[r1] + arr[r2] + arr[r3],
				cbname = 'getJSONP.' + name;
				//判断url地址中是否含有?号
				if (url.indexOf('?') === -1) {
					url += '?jso=' + cbname;
				} else {
					url += '&jso=' + cbname;
				}
				console.log(url);
				//动态创建script标签
			var script = document.createElement('script');
			//定义被脚本执行的回调函数
			getJSONP[name] = function(data) {
				try {
					callback && callback(data);
				} catch (e) {

				} finally {
					//最后删除该函数及script标签
					delete getJSONP[name];
					script.parentNode.removeChild(script);
				}
			}
			//定义script的src
			script.src = url;
			document.getElementsByTagName('head')[0].appendChild(script);
		}
		getJSONP('https://class.imooc.com/api/jsonp', function(data) {
			console.log(data);
		});

在判断url地址中是否含有问号的时候,老师视频里说,?号后面的参数可以自己取名字,我就把?jsonp改成了?jso,就不能用了,很疑惑,我自己想了一下,是不是?jsonp这个参数需要和服务端约定好才行呢?因为我这里没有服务端,我用的是wampserver,后端没有返回,所以失败的呢

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

你好,非常抱歉之前回复的有些问题,

1、图片能够展示出来,不是因为跨域的问题,是使用了ajax获取的是json文件中本地的数据,所以和改变jsonp的名字是没有关系的。

2、jsonp名字实际上是可以改变的,但是视频中提供的数据接口:

http://class.imooc.com/api/jsonp’

在后台中是设置死的,?后面只能写jsonp,不能是其他的名字。

  • 离离钟 提问者 #1
    所以还是要和后端沟通确定好使用'jsonp'这个名称或者是使用其他名称是吧
    2019-02-22 15:49:00
  • 好帮手慕星星 回复 提问者 离离钟 #2
    是的,在项目中数据接口是后端提供的,并且会提供一个接口使用文档,里面会有详细的说明,应该要怎样使用接口,后面使用什么名称,使用正确就没有问题。
    2019-02-22 15:56:48
好帮手慕星星 2019-02-22 10:47:53

你好,使用源码代码进行测试了一下,将拼接的jsonp换成了json,也是可以获取到图片的:

http://img1.sycdn.imooc.com//climg/5c6f6279000138ca16850881.jpg

但是控制台中没有data数据的输出,会有一个警告:

http://img1.sycdn.imooc.com//climg/5c6f629e0001409c18960191.jpg

建议还是使用jsonp来拼接。

同学如果修改之后没有测试成功,建议清除一下缓存,或者与源码对照一下,是否有错误。

祝学习愉快!

  • 提问者 离离钟 #1
    我也是像老师这样的结果,那为什么用jsonp这个字符串就不会有警告呢?不想要有警告的话,除了改成jsonp还有其他方法吗?
    2019-02-22 13:44:39
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师