跨域请求HTTP数据之JSONP

版权声明:本文为博主原创文章,遵循 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的流程:

/* **************************************************
 *
 * 该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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券