聚合文章列表
9 浏览

jsonp系列(四)jquery下jsonp的写法

查看手册,我们看到,jquery写jsonp有两种方式:1$.ajax的方式2$.getJSON的方式先来看第一种方式:(1)http://a.com/index.html代码如下:其中几个参数需要说明下:type:代表请求提交的方式async:是否同步url:请求地址dataType:请求的数据类型,是使用jsonp这种跨数据访问协议的json数据格式还是用其他的数据格式jsonp:有了这个参数,那么实际请求的url地址会变成http://b.com/index.php?callback=?,如果jsonp设置为test111,那么请求地址就是http://b.com/index.php?test111=?jsonpCallback:定义回调函数的名称,和上面的参数jsonp一起使用,如果这个参数为myCallback,请求的地址会变成http://b.com/index.php?callback=myCallback,另外值得注意的是,如果这个值为空的话,那么jquery会默认随机生成一个函数名

JSONP 2016-08-11 发布
12 浏览

JSONP和批量操作功能

比如,在admin.chugang.net需要一个二维码,而在www.chugang.net中已经存在生成二维码的功能。当然可以将www.chugang.net中生成二维码的代码复制一套到admin.chugang.net中。但这造成了代码的重复,此种解决方案,是不被提倡的。于是,我采用www.chugang.net提供API供admin.chugang.net调用的方案。admin.chugang.net使用JS调用www.chugang.net的接口,遇到了跨域问题。普通的ajax请求代码,如下:$.ajax({type:"post",url:'http://www.chugang.net/api',dataType:'json',data:{'id':5,'type':3},beforeSend:function(){},success:function(returnMsg){//},

JSONP 2016-08-19 发布
10 浏览

webApp 阅读器项目实践

这是一个webApp阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader。项目属于麻雀虽小,但五脏俱全的类型,对于前端新手来说,还是很有学习价值。一、项目成果展示二、项目所用技术语言:Html,css,js插件:zepto.js:使用于移动端的js库,语法与jquery相似,但增加了触摸等移动端事件,去掉了对浏览器兼容的代码,因此更轻量级jquery.base64.js:解码base64编码的插件jquery.jsonp.js:提供jsonp请求的插件三、项目实现功能分析1、HTML结构阅读器的构造主要是上边栏、文章主体、控制台面板、下边栏几部分:2、静态页面交互需要实现的功能有:1)点击屏幕中央,出现上下边栏;再次点击,上下边栏消失(这是为什么在上一段代码中,添加了响应触摸屏幕的div这个结构,其宽度可以设置为屏幕宽度的30%左右)2)点击字体,出现控制面板,

JSONP 2016-08-26 发布
AD 友情赞助
10 浏览

使用varnish 4代理处理jsonp接口

背景使用varnish是一个很不错的HTTP加速方案,挪威最大的在线报纸VerdensGang使用3台Varnish代替了原来的12台Squid,性能比以前更好。然而varnish默认情况下是以url进行hash,来标识缓存,所以对于jsonp这种带有callback参数的请求,每一次callback都不一样,很可能会生成大量重复数据,占用内存空间,浪费资源。最近就遇到了这个问题,好在这个还是有解决办法的。实现原理其实jsonp很简单,就是json数据加一个callback和一对括号就可以了,所以只要我们取到没有callback的json数据,并进行缓存,再把数据用标签包起来就可以了。是的,就是这么简单,但是如何实现呢?其实实现起来也很简单,在varnish4的VCL里面其实可以使用synthetic来组合数据,但是这个函数又只能在vcl_synth和vcl_backend_error内使用,其中vcl_synth是用来处理错误的,而vcl_backend_error是用来处理后端服务器错误,所以我们就必须先抛出错误,然后读取jso

JSONP 2016-08-29 发布
17 浏览

JavaScript跨域问题总结

什么是跨域?概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域。URL说明是否允许通信http://www.a.com/a.jshttp://www.a.com/b.js同一域名下允许http://www.a.com/lab/a.jshttp://www.a.com/script/b.js同一域名下不同文件夹允许http://www.a.com:8000/a.jshttp://www.a.com/b.js同一域名,不同端口不允许http://www.a.com/a.jshttps://www.a.com/b.js同一域名,不同协议不允许http://www.a.com/a.jshttp://70.32.92.74/b.js域名和域名对应ip不允许http://www.a.com/a.jshttp://script.a.com/b.js主域相同,子域不同不允许http://www.a.com/a.jshttp://a.com/b.j

JSONP 2016-09-06 发布
16 浏览

JSONP 的实现

前言JSONP是解决跨域问题的一种方案,不同于JSON,其并不是一种数据交换格式,而只是一种绕过跨域的技巧。JSONPJSONP的原理非常简单,为了克服跨域问题,利用没有跨域限制的script标签加载预设的callback将内容传递给js。一般来说我们约定通过一个参数来告诉服务器JSONP返回时应该调用的回调函数名,然后拼接出对应的js。已微博API为例,这个参数名是_cb。我们可以写一个简单的版本:functionJSONP({url,params,callbackKey,callback}){//在参数里制定callback的名字params=params||{}params[callbackKey]='jsonpCallback'//预留callbackwindow.jsonpCallback=callback//拼接参数字符串constparamKeys=Object.keys(params)constparamString=paramKeys.map(k

JSONP 2016-09-06 发布
AD 友情赞助
7 浏览

前端跨域请求原理及实践

一、跨域请求的含义浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如JavaScript)对不同域的服务进行跨站调用。一般的,只要网站的协议名protocol、主机host、端口号port这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用。这也是我们下面实践的理论基础。我们利用NodeJs创建了两个服务器,分别监听3000、3001端口(下面简称服务器3000与服务器3001),由于端口号不一样,这两个服务器以及服务器上页面通信构成了跨域请求。服务器3000在服务器3000上有如下的页面:服务器3000上的请求页面中包含如下JavaScript代码:$(function(){$("#submit").click(function(){vardata={name:$("#name").val(),id:$("#id").val()};$.

JSONP 2016-09-12 发布
11 浏览

Ajax跨域问题解决

摘自:Ajax跨域问题解决(AjaxJSONP)因WEB安全原因,Ajax默认情况下是不能进行跨域请求的,遇到这种问题,自然难不倒可以改变世界的程序猿们,于是JSONP(JSONwithPadding)被发明了,其就是对JSON的一种特殊,简单来说就是在原有的JSON数据上做了点手脚,从而达到可以让网页可以跨域请求。在现在互联网技术对“前后分离”大规模应用的时期,JSONP可谓意义重大啊。假设我们原来的JSON数据为{“hello”:”你好”,”veryGood”:”很好”},那么对应的JSONP的格式就是functionName({“hello”:”你好”,”veryGood”:”很好”}),其中“functionName”不是固定值,自己定义。SpringMVC中实现支持JSONP在SpringMVC中实现支持JSONP总结为如下几点:response响应类型为application/javascript进行json请求的URL中需要携带参数jsonp或callback,并指定值。如h

JSONP 2016-09-12 发布
11 浏览

移动联通基站接口以及电信基站接口分享

什么是基站定位?基站定位是指手机发射基站根据与手机的距离来计算手机坐标地理位置的一种功能,基站定位一般应用于手机用户,手机基站定位服务又叫做移动位置服务(LBS服务),它是通过电信移动运营商的网络(如GSM网)获取移动终端用户的位置信息(经纬度坐标),在电子地图平台的支持下,为用户提供相应服务的一种增值业务。移动联通基站接口移动联通基站接口将通过移动联通基站的小区号和基站号进行基站位置查询。接口地址:http://v.juhe.cn/cell/get支持格式:json/xml请求方式:get/post请求示例:http://v.juhe.cn/cell/get?mnc=0&cell=28655&lac=17695&key=您申请的APPKEY请求参数说明:名称类型必填说明mncint是移动基站:0联通基站:1默认:0lacint是小区号cellint是基站号hexINT否进制类型,16或1

JSONP 2016-09-13 发布
AD 友情赞助
10 浏览

关于跨域

针对上述应用场景的第一种情况,可以设置Document对象的domain属性。但是设置时使用的字符串必须具有有效的域前缀或者它本身。PS:domain值中必须有一个点号。PS:domain不能由松散的变为紧绷的。//初始值"home.example.com"document.domain="example.com";//OKdocument.domain="home.example.com";//NO,不能由松散变紧绷document.domain="example";//NO,必须有一个点号document.domain="another.com";//NO,必须是有效域前缀或其本身JSONPJSONP由两部分组成:回调函数和数据。原理:通过动态

14 浏览

实例操作JSONP原理

}server{listen90;server_namescan_90;rootE:/ng-mywork/90;location/{}error_page500502503504/50x.html;location=/50x.html{roothtml;}}配置了两个域名不同,端口不同的域。不会配置?请看:nginx+php的使用nginx的使用3.get的xhr的异步请求//XMLHttpRequest//true:异步请求//监听onreadystatechange事件句柄//设置timeout,回调varxhr=newXMLHttpRequest();xhr.open('get','http://scan_90:90/test.js',true);xhr.onreadystatechange=function(){if(xhr.readyState===4){if(xhr.status===200){alert("请求成功!")}}}xhr.ontime

JSONP 2016-09-22 发布
13 浏览

「每日一题」JSONP 是什么?

问题:JSONP是什么?补充如下代码,实现一个JSONP方法。functionjsonp(url,data,callback){//补充代码}jsonp('http://api.jirengu.com/weather.php',{callback:'getWeather'},function(ret){console.log(ret)});答案晚上更新哦,欢迎大家回复讨论,动手写写代码~。作者:若愚,本文为作者辛苦原创,知乎首发,转载需私信向作者申请快快加入前端技术交流QQ4群:392054247。这里有严格的审核制度,杜绝广告、推销。尊重、有爱、互助,任何水平的前端爱好者都能找到归宿每日一题,每周资源推荐,精彩博客推荐,工作、笔试、面试经验交流解答,免费直播课,群友轻分享...,数不尽的福利免费送

JSONP 2016-09-24 发布
15 浏览

跨域请求之 JSONP 和 CORS

Web开发中,跨域请求是个经常碰到的问题,因为涉及到网站安全,所以浏览器是拒绝跨域请求的。通常解决跨域会采用JSONP(JSONwithPadding)和CORS(Cross-OriginResourceSharing)。首先理清一个经常会被混淆的概念,AJAX(AsynchronousJavaScriptandXML)和跨域请求是两个不同的概念,AJAX是异步请求和解析处理XML文档的方式,它在服务器端没有提供支持(CORS是一种解决方案)的前提下,也是无法跨域的。跨域请求跨域请求,顾名思义,就是从A地址向非同源的B地址发起了请求。参考MDN上对同源的定义:如果两个页面拥有相同的协议(protocol),端口(如果指定)和主机,那么这两个页面就属于同一个源(origin)。MDN给了同源检测的示例,如果是相对http://store.company.com/dir/page.html,那么

JSONP 2016-09-24 发布
13 浏览

JavaScript 跨域请求数据(JSONP)

我想要把爱词霸的每日一句引入到页面上,爱词霸向外开放了API,接口返回json数据,为了让页面更轻巧,我没有用jQuery,而是直接纯js写了一段代码:functionhttpGetAsync(theUrl,callback){xmlHttp=null;if(window.XMLHttpRequest){//codeforIE7,Firefox,Opera,etc.xmlHttp=newXMLHttpRequest();}elseif(window.ActiveXObject){//codeforIE6,IE5xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}if(xmlHttp!=null){xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4&&xmlHttp.status

JSONP 2016-09-26 发布
8 浏览

node学习之路(一)—— 网络请求

一直以来想深入学习一下node,一来是自己目前也没有什么时间去学习服务器端语言,但是有时候又想自己撸一下服务器端,本着爱折腾的精神开始写一写关于node的文章记录学习心得。本系列文章不会过多去讲解node安装、基本API等内容,而是通过一些实例去总结常用用法。本文主要讲解node网络操作的相关内容,node中的网络操作依赖于http模块,http模块提供了两种使用方式:作为服务器端使用,创建一个http服务器,监听http客户端请求并返回响应;作为客户端使用,发起一个http客户端请求,获取服务器端响应。nodehttp模块创建服务器node处理get请求实例毕竟作为一个前端,我们经常需要自己搭建一个服务器做测试,这里我们先来讲一下nodehttp模块作为服务器端使用。首先我们需要,使用createServer创建一个服务,然后通过listen监听客服端http请求。我们可以创建一个最简单的服务器,在页面输出helloworld,我们可以创建helloworld.js,内容如下:varhttp=requi

JSONP 2016-09-29 发布
9 浏览

跨域浅谈

说到跨域,我们就不得不先提一下同源。同源是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同,而不同源就是跨域。也就是说我们如果域名,协议,端口只要有一个不是不同的那么就是跨域。举个例子说:http://www.example.com/http://api.example.com/detail.html不同源域名不同https//www.example.com/detail.html不同源协议不同http://www.example.com:8080/detail.html不同源端口不同http://api.example.com:8080/detail.html不同源域名、端口不同https://api.example.com/detail.html不同源协议、域名不同https://www.example.com:8080/detail.html不同源端口、协议不同http://www.example

JSONP 2016-09-29 发布
10 浏览

Laravel/Lumen中使用跨域功能

目前我所知道的两种跨域方式,一种是JSONP,一种是CORS。本篇文章会简单的介绍一下JSONP的原理,会介绍JSONP在Laravel/Lumen中的实现方式,由于CORS在Github上已经有Laravel/Lumen的扩展包了,这里就不再实现了。JSONPJSONP原理JSONP,也就是JSONwithPadding的意思,这是一种利用