自定义原生jsonp跨域请求

由于同源策略，跨域（协议、域名、端口均相同的为同域）之间是不允许请求资源的，但是scrapt标签不收跨域约束，如论是jQuery中的jsonp还是angularjs中的jsonp都是通过script来实现跨域请求的。

注意：
　　1、跨域请求是通过get方式进行的，参数会连到url后；
　　2、jsonp需要设置回调函数，前端需要定义回调函数，后端也需要有回调函数的相关处理，否则请求不会成功。

jsonp自定义方法一（简易版）：

var ajax = function(params) {var callbackName = params.jsonp;window[callbackName] = function (json) {console.log("callback:");console.log(json);};var script = document.createElement('script');script.setAttribute("type","text/javascript");script.src = params.url+params.jsonp;var head = document.getElementsByTagName('head')[0];head.appendChild(script);}ajax({"url":"/userInvite/saveLog.do?regKey=eUa%252Fv70AeBC2QolRKlUNJA%253D%253D&refererUrl=www.baidu.com&guid=&callback=",    // 请求地址"jsonp":"success_jsonpCallback",  // 回调函数名为"success_jsonpCallback"，可以设置为合法的字符串})

jsonp自定义方法二：

var ajax = function ajax(params) {params = params || {};params.data = params.data || {};jsonp(params);// 定义jsonp方法function jsonp(params) {//创建script标签并加入到页面中var callbackName = params.jsonp;var head = document.getElementsByTagName('head')[0];// 设置传递给后台的回调参数名，可以自定义回调函数名params.data['callback'] = callbackName;var data = formatParams(params.data);var script = document.createElement('script');head.appendChild(script);//发送请求script.src = params.url + '?' + data;//创建jsonp回调函数（发送请求后会得到后台结果，然后调用该回调函数）window[callbackName] = function (json) {//json为后台返回的请求结果，后台已完成该次请求的响应，之后将创建的script移除head.removeChild(script);clearTimeout(script.timer);window[callbackName] = null;//成功响应后做的处理params.success && params.success(json);};//为了得知此次请求是否成功，设置超时处理if (params.time) {script.timer = setTimeout(function () {window[callbackName] = null;head.removeChild(script);params.error && params.error({message: '超时'});}, time);}};//格式化参数function formatParams(data) {var arr = [];for (var name in data) {arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));}// 添加一个随机数，防止缓存arr.push('v=' + random());return arr.join('&');}// 获取随机数function random() {return Math.floor(Math.random() * 10000 + 500);}};    //使用实例
ajax({"url":"/userInvite/saveLog.show",    // 请求地址"jsonp":"success_jsonpCallback",  // 回调函数名为"success_jsonpCallback""data": {"regKey":sourceType,  "refererUrl":referUrl|| "","regGuid":cookieTest},success:function(res){   // 请求成功的回调函数if(res != null){console.log("跨域请求成功！");}},error: function(error) {}   // 请求失败的回调函数*/});

自定义原生jsonp跨域请求相关推荐

原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
JS的jsonp是什么？5分钟学会jsonp跨域请求
一.jsonp是什么? jsonp是解决跨域请求的一种技术.浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止. 二.json ...
JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 "Uncaught SyntaxError ...
Jsonp 跨域请求实例
Jsonp 跨域请求实例关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止 ...
jsonp跨域请求响应结果处理函数(python)
接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...
轻松搞定JSONP跨域请求
轻松搞定JSONP跨域请求一.同源策略要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑, ...
实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...
【漏洞利用】JSONP跨域请求漏洞挖掘、利用详解
参考文章轻松搞定JSONP跨域请求 jsonp跨域原理,使用以及同源策略跨域漏洞丨JSONP和CORS跨域资源共享 Tag: Ref: [[019.同源策略]] 本片文章仅供学习使用,切勿触犯法律 ...

自定义原生jsonp跨域请求

自定义原生jsonp跨域请求相关推荐

最新文章

热门文章