跨域请求之jsonp的实现方式
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
- (function(){
- $jsonp(//地址
- 'http://api.douban.com/v2/movie/in_theaters',
- //传递的参数
- {
- count:10,start:5
- },
- //回调函数
- function(data){
- document.getElementById('result').innerHTML=JSON.stringify(data);
- }
- );
- })();
- (function(window,document){
- 'use strict';
- var jsonp=function(url,data,callback){
- //1 挂载回调函数
- var fnSuffix=Math.random().toString().replace('.','');
- var cbFuncName='my_json_cb_'+fnSuffix;
- //将函数挂载在全局环境的方式不推荐 使用cbs.my_json_cb_
- window[cbFuncName]=callback;
- //2 将data转化成url字符串的形式
- // {id:1,name:'zhangsan'} =>id=1&name=zhangsan
- var querystring=url.indexOf('?')==-1?'?':'&';
- for(var key in data){
- querystring+=key+'='+data[key]+'&';
- // id= 1 &
- }
- //querystring=?id=1&name=zhangsan&
- //3 处理url地址中的回调参数
- //url+=callback=sdfsfdg
- querystring+='callback='+cbFuncName;
- //querystring=?id=1&name=zhangsan&cb=my_json_cb_0231241
- //4 创建一个script的标签
- var scriptElement=document.createElement('script');
- scriptElement.src=url+querystring;
- // 此时还不能将其append到页面上
- //5 将script标签放到页面中
- document.body.appendChild(scriptElement);
- //append过后页面会自动对这个地址发送请求,请求完成以后自动执行脚本
- };
- /*把jsonp放到全局*/
- window.$jsonp=jsonp;
- })(window,document);
缺点:只能支持GET请求而不能支持POST等其他http请求方式;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
优点:支持跨域,兼容性好。。。
跨域请求之jsonp的实现方式的更多相关文章
- 跨域请求之JSONP 一
跨域请求之JSONP 一 跨域请求的方式有很多种, iframe document.domain window.name script XDomainRequest (IE8+) XMLHTTPReq ...
- js跨域请求(jsonp)
jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...
- JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- Ajax跨域请求数据实例(JSOPN方式)
今天在做取消申请的时候遇到了一个跨域ajax提交的问题. 情景是: 系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败) 系统B ...
- Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域
JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...
- Django跨域请求之JSONP和CORS
现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...
- Ajax+Spring MVC实现跨域请求(JSONP)(转)
背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...
- 搞定所有的跨域请求问题 jsonp CORS
网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践. 本文解决跨域中的 ge ...
- Ajax+Spring MVC实现跨域请求(JSONP)
背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...
随机推荐
- Java数据结构和算法(一)线性结构之单链表
Java数据结构和算法(一)线性结构之单链表 prev current next -------------- -------------- -------------- | value | next ...
- 用户体验要好,App动画得这么做
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 在用户体验设计方面,App动画的设计和添加,带给设计师无限的创造空间的同时,也成为设计师群体最具 ...
- 摹客项目在2018年工信部"创客中国"名列10强并荣获二等奖
2018“创客中国”互联网+大数据创新创业大赛(暨2018创客中国产业投资峰会)8月19日在厦门进行了总决赛.大赛由国家工业和信息化部.厦门市人民政府主办,厦门文广集团等承办.工信部信息中心领导.厦门 ...
- oracle执行多个pl/sql块
DECLARE V_SQL_DROP_TABLE VARCHAR2(50) := 'DROP TABLE MY_TEST2'; V_SQL_CREATE_TABLE VARCHAR2( ...
- RSA生成、加密、解密、签名。
首先,要会生成RSA密码对. https://app.alipay.com/market/document.htm?name=saomazhifu#page-23 (事例中的密钥对好像有问题,最 ...
- Windows游戏找不到了怎么办?
大家有的时候,可能是不慎操作,或是某些新装的Windows,会发现那些经典的游戏不见了,那它们去哪了呢?是长腿跑了?还是Windows偷工减料?都不是,让巩固来教你们把他们找出来! 1.在开 ...
- 详解Windows Service Wrapper(winsw.exe)及应用场景
winsw.exe可以帮助nginx作为windows服务自启动,不需要每次都输入命令,很方便,使用到目前为止这种做法的效果很完美.你得到了 Windows 服务的支持,而且在服务重启时没有遗留孤立的 ...
- [operator]Ubuntu server 18 设置静态IP
root@ubuntu-MesosMaster-Marathon:~# cat /etc/netplan/-cloud-init.yaml # This file is generated from ...
- gj3 Python数据模型(魔法函数)
3.1 什么是魔法函数 类里面,实现某些特性的内置函数,类似 def __xx__(): 的形式. 不要自己定义XX,并不是和某个类挂钩的 class Company(object): def __i ...
- UVa 11167 Monkeys in the Emei Mountain (最大流)
题意:雪雪是一只猴子.它在每天的 2:00 —— 9:00之间非常渴,所以在这个期间它必须喝掉2个单位的水.它可以多次喝水,只要它喝水的总量是2.它从不多喝,在一小时内他只能喝一个单位的水.所以它喝水 ...