专栏首页Super 前端跨域请求HTTP数据之JSONP

跨域请求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 条评论
登录 后参与评论

相关文章

  • JavaScript闭包及实现循环绑定事件

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

    奋飛
  • JavaScript函数及其prototype

    函数可以通过声明定义,也可以是一个表达式。 (1)函数声明式: 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句,所以不以分...

    奋飛
  • JavaScript设计模式--观察者模式

    观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 在JavaScript中,一般使...

    奋飛
  • React Native在Android当中实践(五)——常见问题

    这个问题是由于ReactNative兼容64位Android手机导致的。 解决办法: 1.在项目的根目录的 gradle.properties 里面添加一行...

    Demo_Yang
  • 短信接口攻击事件(一)紧张的遭遇战险胜

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载。 事件简述 这是一件...

    我是十三
  • Kali Linux Web渗透测试手册(第二版) - 5.3 - 利用XSS获取Cookie

    thr0cyte,Gr33k,花花,MrTools,R1ght0us,7089bAt,

    7089bAt@PowerLi
  • Kali Linux Web渗透测试手册(第二版) - 5.3 - 利用XSS获取Cookie

    在前几章中,我们知道了攻击者可以使用cookie来冒充当前用户的身份,在上一章节我们也简单地引入了XSS的基本概念。如果目标站点存在XSS漏洞并且Cookie并...

    用户1631416
  • WEB前端架构(二)

    继续想到哪说哪,, 继上一期说,定好了MVC结构之后 就准备先搞些组件出来,首先就是抽个input出来。。 目前有登录页和用户地址栏页, input至少有二...

    web前端教室
  • 微信刚刚放出绝招!我们 1 个小时就做出了可打开网页「无需审核」的电商小程序(文内有实例)!

    对的!时隔两个月的沉默,微信团队昨夜又放弃了性生活……开放了重磅的小程序打开网页能力!

    知晓君
  • 自制一个 LoRa PM2.5 监测器

    年前整理医院发票,发现小孩一整年看病花了快3000块,幸好买的保险能报销大部分。病历基本都是支气管炎、上呼吸道感染、咽炎,还有一次发展成了肺炎去拍了胸片。小孩这...

    twowinter

扫码关注云+社区

领取腾讯云代金券