前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >跨域请求HTTP数据之JSONP

跨域请求HTTP数据之JSONP

作者头像
奋飛
发布2019-08-15 16:02:23
6860
发布2019-08-15 16:02:23
举报
文章被收录于专栏:Super 前端Super 前端

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/42933645

只须设置<script>元素src属性(假如它还没有插入到document中,需要插入进去),然后浏览器就会发送一个HTTP请求以下载src属性所指向的URL。使用<script>元素进行Ajax传输的一个主要原因是,它不受同源策略的影响,因此可以使用它们从其他的服务器请求数据,第二个原因是包含JSON编码数据的响应体会自动解码(即,执行)。 这种使用<script>元素作为Ajax传输的技术称为JSONP。

下面展示了一个完整JSONP的流程:

代码语言:javascript
复制
/* **************************************************
 *
 * 该JS主要是模拟实现JSONP
 * JSONP是实现跨请求数据的一种方式
 *
 * ************************************************** */

// 存放相应结果
var responseData = '';

//具体执行
(function() {
	//请求数据
	getData();

	//定义请求次数
	var i = 5;
	//判断数据是否存在
	var judgeData = setInterval(function() {
		if (responseData != '') {
			i--;
			if (responseData == 'fail') {
				if (i >= 0) {
					getData();
				} else {
					clearInterval(judgeData);
					console.log("数据请求失败");
				}
			} else {
				clearInterval(judgeData);

				// 处理相应数据
				parseDate();
			}
		}
	}, 100)
})();

// 发送请求
function getData() {
	var url = "请求URL";
	getJSONP(url, function(response){
		// 保存响应数据
		responseData = response;
	});
}; 

// 解析数据
function parseDate() {
	alert(responseData);
}; 

// 根据指定的URL发送一个JSONP请求
// 然后把解析得到的响应数据传递给回调函数
// 在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称
function getJSONP(url,callback){
 	if (!url) {
		return;
	}
	// 为本次请求创建一个唯一的回调函数名称
	var name = 'LIGANG' + generateMixed(6); 
	var cbname = 'getJSONP.' + name; //作为getJSONP函数的属性
	
	// 将回调函数名称以表单编码的形式添加到URL的查询部分中
	// 使用jsonp作为参数名,一些支持JSONP的服务可能使用其他的参数名,比如callback
	if (url.indexOf('?') === -1) {
		url += '?jsonp=' + cbname + '&siteid=' + "12f5ed7d"; //作为查询部分添加参数,请求数据可以动态生成
	} else {
		url += '&jsonp=' + cbname + '&siteid=' + "12f5ed7d"; //作为新的参数添加它
	}
	// 创建script元素用于发送请求
	var script = document.createElement('script');

	//定义被脚本执行的回调函数
	getJSONP[name] = function(e) {
		try {
			callback && callback(e);
		} catch (e) {
			//
		} finally {
			//最后删除该函数与script元素
			delete getJSONP[name];
			script.parentNode.removeChild(script);
		}
	};
	// 立即发送HTTP请求
	script.src = url;
	document.getElementsByTagName('head')[0].appendChild(script);
}

// 生成指定位数的随机字符串
function generateMixed(n) {
    var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    var res = "";
 	for(var i = 0; i < n ; i ++) {
    	var id = Math.ceil(Math.random()*35);
    	 res += chars[id];
	}
 	return res;
}
代码语言:javascript
复制
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015年01月20日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档