跨域请求之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 上的远程资源.可 ...
随机推荐
- 编译安装bluez5.44
1.下载 2. configure 提示需要glib 3.yum install glib 4.还是提示glib 5.yum install glib-devel 下载编译glib make inst ...
- asp.net (jquery easy-ui datagrid)通用Excel文件导出(NPOI)
http://www.cnblogs.com/datacool/archive/2013/03/12/easy-ui_datagrid_export_excel_asp_net.html
- maven使用感受
第一次接触的时候,什么都不懂,感觉好复杂. 后来系统地看了一个使用教程: 简单评价一下: 自动帮我们下载jar架包,还有就是可以执行命令自己部署到远程服务器上面去. 缺点: 学习成本.一般人不了解.第 ...
- ubuntu系统下安装pyspider:搭建pyspider服务器新手教程
首先感谢“巧克力味腺嘌呤”的博客和Debian 8.1 安装配置 pyspider 爬虫,本人根据他们的教程在ubuntu系统中进行了实际操作,发现有一些不同,也出现了很多错误,因此做此教程,为新手服 ...
- 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo
提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...
- Python是什么
Python是一种编程语言,它的名字来源于一个喜剧.也许最初设计Python这种语言的人并没有想到今天Python会在工业和科研上获得如此广泛的使用.著名的自由软件作者Eric Raymond在他的文 ...
- oss上传文件夹-cloud2-泽优软件
泽优软件云存储上传控件(cloud2)支持上传整个文件夹,并在云空间中保留文件夹的层级结构,同时在数据库中也写入层级结构信息.文件与文件夹层级结构关系通过id,pid字段关联. 本地文件夹结构 文件 ...
- obj-c的优缺点
优点: 1) Cateogies : 类别 2) Posing : 扮演 3) 动态识别 : 编译时与运行时动态识别类型 4) 指标计算 : 指针计算 指针的 +- * / 5) 弹性信息传递 : 某 ...
- 点云库PCL学习
1. 点云的提取 点云的获取:RGBD获取 点云的获取:图像匹配获取(通过摄影测量提取点云数据) 点云的获取:三维激光扫描仪 2. PCL简介 PCL是Point Cloud Library的简称,是 ...
- POJ2653判断线段相交
POJ2653 题目大意:按顺序放木棒,问最后所有的木棒中上面没有木棒的木棒的索引是…… 思路:按理说线段相交的题目做的听多了,这个应该不算新鲜,但是这个题,还是让我学到了认真读题,面对这个题很容易想 ...