JSONP的原理
JSONP的原理
JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为:
jsonpCallback({ msg:'this is json data'})
1.在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
2.将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
3.客户端浏览器,解析script标签,并执行返回的javascript文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数) .
简单来说就是:在客户端声明 callback回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的JSON数据并动态执行回调函数。
//定义Ajax函数
function ajaxFun() {
var timeStamp = Math.floor(new Date().getTime() / 1000);
var url =
"http://apiso.alidemo.3gpp.cn/httpserver/cp/yisou/ali_feedback_interface.php?callback=jsonpCallback&feedbacktype=add&type="
+ feedbackNumber + "&book=" + me.mixedInfo.title + "&author=" +
me.mixedInfo.author + "&chapter=" + me.mixedInfo.cname +
"&chapterid=" + me.mixedInfo.cid + "&questiondesc=" + text +
"&platform=1&t=" + timeStamp + "&sn=" +
md5("d30fcd1a9f1900fa049b4766e0a275e1" + timeStamp);
var scriptObj = document.createElement("script");
scriptObj.src = url;
scriptObj.id = "jsonpScript";
document.body.appendChild(scriptObj);
//jsonp回调函数,jsonpCallback必须为全局函数,因为jsonp返回的是在全局环境中执行函数的语句,即jsonpCallback(data)
window.jsonpCallback = function(data) {
switch (data.code) {
case "1":
novel.readerPrompt('提交成功,即将返回……', 1, function() {
window.history.go(-1);
});
break;
case "0":
novel.readerPrompt('提交失败。', 2);
break;
case "900":
novel.readerPrompt('提交失败,验证失败。', 2);
break;
}
//成功后删除scriptObj,后面的setTimeout就不会执行了
if (document.getElementById("jsonpScript")) {
document.body.removeChild(scriptObj);
}
}
//设置超时,超时的话直接显示提交成功
setTimeout(function() {
if (document.getElementById("jsonpScript")) {
document.body.removeChild(scriptObj);
novel.readerPrompt('提交成功,即将返回……', 1, function() {
window.history.go(-1);
});
}
}, 2000);
}
ajaxFun();
JSONP的原理的更多相关文章
- jsonp协议原理深度解析
前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了.但是因为当时后端没有支持jsonp来访问,后来他在实现这个功 ...
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...
- JSONP的原理与实现(基于jQuery)
为什么会有JSONP?因为我们使用AJAX,使用AJAX可能就会遇到跨域的需求,如何解决呢,对,就是JSONP. 这里注意下JSON和JSONP不是一类,虽然他们只是一个字母只差,但是实际差别很大.这 ...
- jsonp实现原理
jquery 封装在 ajax方法 里面的jsonp jsonp跨域的原理 1:使用script 标签发送请求,这个标签支持跨域访问 2:在script 标签里面给服务器端传递 ...
- jsonp详细原理之一
/*script标签是不存在跨域请求的,类似的还有img,background:url,link 你可以想象一下,平时的这些标签都是可以直接引入外部资源的,所以是不存在跨域问题的*/ function ...
- jsonp的原理,应用场景,优缺点
在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作 另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,ifra ...
- 关于javascript跨域及JSONP的原理与应用
同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略. 为什么需要同源策略,这里举个例子: 假 设现在没有同源策略,会发生什么事情呢? ...
- jsonp的原理和实现
什么是JSONP? javascript高级程序设计中是这样介绍jsonp的: jsonp是JSON with padding(填充式JSON或参数式JSON )的简写,是应用JSON的一种新方法,在 ...
- jsonp 实现原理
Jsonp原理: 首先在客户端注册一个callback, 然后把callback的名字传给服务器. 此时,服务器先生成 json 数据.然后以 javascript 语法的方式,生成一个funct ...
随机推荐
- asp.net mvc+EF 递归生成树结构返回json
0.数据表结构,主要属性有:Id.parentId(父节Id).Text.Url……等等. 1.新建一个树结构MenuModels public class MenuModels { private ...
- HBase笔记--filter的使用
HBASE过滤器介绍: 所有的过滤器都在服务端生效,叫做谓语下推(predicate push down),这样可以保证被过滤掉的数据不会被传送到客户端. 注意: 基于字符串的比较器,如 ...
- HttpCookie
参考 : http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html 上文结尾有提到一个说法 4. HttpRequest.Cooki ...
- 基于SQL_ID查看对象大小
SQL> set echo off set echo off set verify off set serveroutput on set feedback off set lines 200 ...
- windows环境变量如何在cmd中打印
在windows的cmd下,用"set"命令可以得到全部的环境变量,如何想得到某个环境变量,直接这样"set path"就可以了. set不仅如何,还有其他功能 ...
- JavaScript……
退役了好伤心…… 这几天搞研究性学习写网页版贪吃蛇代码……太蛋疼了 要学javascript,就还要搞AJAX.JQuery.JSON…… 我感觉整个人都不好了
- 日期函数(SqlServer)
1.常用日期方法(下面的GetDate() = '2006-11-08 13:37:56.233') (1)DATENAME ( datepart ,date ) 返回表示指定日期的指定日期部分的字符 ...
- OSI七层以及各层上的协议
各层简介: [1]物理层:主要定义物理设备标准,如网线的接口类型.光纤的接口类型.各种传输介质的传输速率等.它的主要作用是传输比特流(就是由1.0转化为电流强弱来进行传输,到达目的地后在转化为1.0, ...
- JS浏览器对象-History对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [深入React] 3.JSX的神秘面纱
<div> <List /> </div> 会被编译为: React.createElement("div",null, React.creat ...