原生JavaScript封装的jsonp跨域请求



<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>跨域的jsonp请求</title>

</head>

<body>

	<script>

	(function(window,document){

		//该函数接受三个参数，请求的地址，请求的数据（对象格式），回调函数

		// 回调函数可接受一个参数用来返回请求到的信息

		var jsonp = function(url,data,callback){

			// 第一步：挂载回调函数

			//cbFuncName为回调函数名

			var cbFuncName = "my_jsonp_cb" + Math.random().toString().replace(".",'');

			window[cbFuncName] = callback;

			//第二步：将请求的数据转换为字符串格式

			var queryString = url.indexOf('?')===-1?'?':'&';

			for(var key in data){

				queryString += key + '=' + data[key] + '&';

			}

			//第三步：处理URL中的回调参数(callback为回调参数名)

			queryString += 'callback=' + cbFuncName;

			// 第四步：创建一个script标签

			var script = document.createElement("script");

			//第五步：将所请求的地址赋给script标签的src属性

			script.src = url + queryString;

			//第六步：将script标签插入到页面当中

			document.body.appendChild(script);

		};

		//将jsonp函数赋给window对象

		window.$jsonp = jsonp;

	})(window,document);

	</script>

</body>

</html>

原生JavaScript封装的jsonp跨域请求的更多相关文章

  1. JSONP跨域请求数据报错 “Unexpected token :”的解决办法

    原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...

  2. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  3. Django学习---jsonp跨域请求

    jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...

  4. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  5. jsonp跨域请求响应结果处理函数(python)

    接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...

  6. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  7. 轻松搞定JSONP跨域请求

    一.同源策略 要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑,当前域不能访问其他域的东西. ...

  8. 详解 JSONP跨域请求的实现

          跨域问题是由于浏览器为了防止CSRF攻击(Cross-site request forgery跨站请求伪造),避免恶意攻击而带来的风险而采取的同源策略限制.当一个页面中使用XMLHTTPR ...

  9. JSONP 跨域请求 - 获取JSON数据

    如何用原生方式使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数. ...

随机推荐

  1. java爬取图片示例

    爬虫是什么 这里引用一下 wiki 中关于 网络爬虫的定义,相信大家看过后会有一个清晰的认识 网络爬虫(英语:web crawler),也叫网络蜘蛛(spider),是一种用来自动浏览万维网的网络机器 ...

  2. HttpServletRespnse 对象 相关基本应用

    HttpServletRespnse 对象相关基本应用 向浏览器输出数据 getOutputStream() @Override protected void service(HttpServletR ...

  3. Android开发之最火的开源框架之一Xutils2详解（摘自开源作者官方介绍详解）

    此框架说实话还是挺不错的,挺好用的,功能多,所以我也用过. 由于CSDN博客写的字数有限制,所以全文的用法打包成了markdown 文件,因为markdown真的太还用了. 全文下载地址为: http ...

  4. xml selectnodes

    [xML ]SelectNodes的用法 之前简单找个SelectNodes的例子看了看,写了读取XML文件节点的程序,但是节点数目有限制,后来仔细看看,是自己没完全弄清SelectNodes的用法, ...

  5. 重要bug记录

    导唱功能:需求点分析:本地已下载歌曲播放,判断是否有音频原唱伴奏版权,无版权按钮显示“导唱”,有版权显示“播原唱”.程序实现逻辑: 1.下载歌曲时调用一个歌曲信息接口,返回歌曲的一些属性信息,其中包括 ...

  6. 熟练剖分(tree) 树形DP

    熟练剖分(tree) 树形DP 题目描述 题目传送门 分析 我们设\(f[i][j]\)为以\(i\)为根节点的子树中最坏时间复杂度小于等于\(j\)的概率 设\(g[i][j]\)为当前扫到的以\( ...

  7. CVPR2020 面向密集多角度物体检测的动态修正网络（DRN）

    论文链接:https://arxiv.org/pdf/2005.09973.pdf code:https://github.com/Anymake/DRN_CVPR2020 文章概要: 本文是中科院自 ...

  8. 最小发射功率下WSN的连通性和覆盖率

    简述: 实验要求我们将传感器节点随机均匀分布在1x1的方格中,然后计算节点的最小共同发射功率(COMPOW),保证网络刚好连通,并计算出这些节点的覆盖率.为了解决这个问题,我们的做法是随机均匀部署10 ...

  9. 浅谈备受开发者好评的.NET core敏捷开发工具，讲讲LEARUN工作流引擎

    通俗来讲,所谓一个工作流管理系统,如果将其拆分出来一个个单讲话,大致可理解为由工作流引擎.工作流设计器.流程操作.工作流客户界面. 流程监控.表单设计器.与表单的集成以及与应用程序的集成等几个部分组成 ...

  10. wpf之DataGrid绑定DataTable，其中DataGridComboBoxColumn双向绑定枚举enum

    百度了快一天,没结果,除了几个原创的,都是复制粘贴的内容. 不想用别的笨办法,于是脑洞大开,想出了我的办法. 首先是前台代码,与网上的比较类似: xmlns:jz="clr-namespac ...