原创 javascript 封装jsonp 请求
2017-04-16 22:53
441 查看
jsonp的相关技术就不负责科普了,只说两个关键点: 1.jsonp只是个html和浏览器的小把戏通过src来跨域加载资源。2.juqery中看似jsonp跟json的请求调用方法差不多,但是实现却是截然不同的,jsonp不需要js实现请求。
代码如下:
总结: jsnop本质上是get请求,所以jsonp的post是行不通的,当然如果跨域服务器不支持再怎么get 也实现不了jsonp!
代码如下:
//jsonp 调用对象 var jsonp = {}; //调用方法 jsonp.get = function (url, data, callback) { this.createJsonp(url, data,callback); }; //动态添加<script> 标签并组建请求url callback为跨域请求成功后回调函数 jsonp.createJsonp = function(url, data, callback) { var radom = Math.random() * 100; var number = parseInt(radom); //随机数字 var callBackRadom = "jsonpSuccess_" + number; //指定回调函数 window[callBackRadom] = callback; var query = []; for (var key in data) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } var param = (query.length ? '?' + query.join('&') : ''); var script = document.createElement("script"); script.type = "text/javascript"; if (param != null && param.length > 0) { script.src = url + "" + param + "&callback=" + callBackRadom; } else { script.src = url + "?callback=" + callBackRadom; } script.id = callBackRadom; //指定id 是为了removeJsonp中动态去除<script>标签 document.getElementsByTagName('head')[0].appendChild(script); this.removeJsonp(callBackRadom); } //成功后移除动态加载的<script>标签 jsonp.removeJsonp =function (id) { var head = document.getElementsByTagName('head')[0]; var el = document.getElementById(id); if (head != null && el != null) { head.removeChild(el); } }调用示例
jsonp.get("http://127.0.0.1:800/Test/GetList", {}, function (r) { console.log(r); //do something ..... });
总结: jsnop本质上是get请求,所以jsonp的post是行不通的,当然如果跨域服务器不支持再怎么get 也实现不了jsonp!
相关文章推荐
- [原创] JavaScript面向对象编程(2) :继承和封装
- 封装的Javascript异步请求方法
- springboot跨域请求,实现跨域jsonp请求服务端数据自动封装
- Tornado JSONPHandler, 支持JSONP的请求封装
- jsonp实现JavaScript跨域请求
- JavaScript用JSONP跨域请求数据实例详解
- Tornado 支持JSONP的请求封装
- 完美解决javascript中jsonp跨域请求无法触发error 方法的触发的方案(兼容ie6+)
- 基于AFNetworking封装的网络请求工具类【原创】
- 封装jsonp跨域请求
- JavaScript - ajax请求的初步封装
- AJAXCDR:利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求[原创]
- JSONP分享-- 在JavaScript中跨域请求
- 原生javascript封装类似jquery的ajax请求跨域函数
- Vue 中封装 JSONP跨域请求
- javascript的同源策略以及jsonp请求百度天气接口
- 原创:Javascript Websocket客户端封装
- 【javascript】jquery jsonp跨越请求
- javascript对XMLHttpRequest异步请求的面向对象封装