上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS。

  那这篇博客就介绍JSONP方式。

  JSONP原理
  在同源策略下,在某个server下的页面是无法获取到该server以外的数据的,但img、iframe、script等标签是个例外。这些标签能够通过src属性请求到其它server上的数据。
  而JSONP就是通过script节点src调用跨域的请求。
  当我们通过JSONP模式请求跨域资源时,server返回给client一段javascript代码,这段javascript代码自己主动调用client回调函数。
  举个样例
  clienthttp://localhost:8080訪问serverhttp://localhost:11111/user。正常情况下,这是不同意的。

由于这两个URL是不同域的。

  
  若我们使用JSONP格式发送请求的话?
  http://localhost:11111/user?

callback=callbackfunction

  则server返回的数据例如以下:
  callbackfunction({"id":1,"name":"test"})
  细致看看server返回的数据,事实上就是一段javascript代码。这就是函数名(參数)格式。
  server返回后,则自己主动运行callbackfunction函数。
  因此,client须要callbackfunction函数。以便使用JSONP模式返回javascript代码后自己主动运行其回调函数。

  注意:当中url地址中的callback和callbackfunction是任意命名的。

  
  详细的JS实现JSONP代码。

  JS中:
   
  <script>
var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do? jsonp=callbackfunction";
var script = document.createElement('script');
script.setAttribute('src', url); //load javascript
document.getElementsByTagName('head')[0].appendChild(script); //回调函数
function callbackfunction(data){
var html=JSON.stringify(data.RESULTSET);
alert(html);
}
</script>
  server代码Action:
  后台返回的json外面须要由回调函数包裹。详细的方法例如以下:
  
public class TestJson extends ActionSupport{

	@Override
public String execute() throws Exception {
try {
JSONObject jsonObject=new JSONObject();
List list=new ArrayList();
for(int i=0;i<4;i++){
Map paramMap=new HashMap();
paramMap.put("bank_no", 100+i);
paramMap.put("money_type", i);
paramMap.put("bank_name", i);
paramMap.put("bank_type", i);
paramMap.put("bank_status", 0);
paramMap.put("en_sign_ways", 1);
list.add(paramMap);
}
JSONArray rows=JSONArray.fromObject(list);
jsonObject.put("RESULTSET", rows);
HttpServletRequest request=ServletActionContext.getRequest();
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/javascript"); boolean jsonP = false;
String cb = request.getParameter("jsonp");
if (cb != null) {
jsonP = true;
System.out.println("jsonp");
response.setContentType("text/javascript");
} else {
System.out.println("json");
response.setContentType("application/x-json");
}
response.setCharacterEncoding("UTF-8");
Writer out = response.getWriter();
if (jsonP) {
out.write(cb + "("+jsonObject.toString()+")");
System.out.println(jsonObject.toString());
}
else{
out.write(jsonObject.toString());
System.out.println(jsonObject.toString());
}
} catch (Exception e) {
e.printStackTrace();
} return null;
}
}
 
 JQUERY实现JSONP代码。

 Jquery从1.2版本号開始也支持JSONP的实现。
$(function(){
jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data)
{
var html=JSON.stringify(data.RESULTSET);
$("#testjsonp").html(html);
}
);
});
  第一个?代表后面是參数,与咱们一般调用一样。重要的是第二个?。则是jquery动态给你生成毁掉函数名称。


至于后台代码和上述一致,使用同一个后台。


JQUERY中Ajax实现JSONP代码。
     $.ajax({
type:"GET",
async :false,
url:"http://localhost:8080/crcp/rcp/t99eidt/testjson.do",
dataType:"jsonp",
success:function(data){
var html=JSON.stringify(data.RESULTSET);
$("#testjsonp").html(html);
},
error:function(){
alert("error");
} });
    注意:这样的形式,默认的參数是callback,而不是会是其它。则action代码中获取calback值则
    String cb=request.getParameter("callback");
    而且生成的回调函数,默认也是类似上述一大串数字。
    依据Ajax手冊。更改callback名称以及回调函数名称。

    http://www.w3school.com.cn/jquery/ajax_ajax.asp 
    jsonpCallback:callbackfunction,则请求的地址为:
    最后返回前台的是:
    callbackfunction(详细的json值)

    当中上述JS实现JSONP代码中。若不是动态拼接script脚本,而是直接写script标签。类似例如以下:
   <script type="text/javascript" src=""></script>
   若这样写的话,通过debug发现,的确正确返回了。可是一直提示找不到回调函数。即使js也提供了回调函数【各个浏览器都測试】
   若要通过JS来显示。则通过代码动态create script标签。

   JSONP跨域方式。非常方便,同一时候也支持大多部分浏览器,可是唯一缺点是,仅仅支持GET提交方式,不支持其它POST提交。
   若url地址传输的參数过多,怎样实现呢?下篇博客会解说还有一种跨域方案CROS原理以及详细调用演示样例。

跨域JSONP原理及调用详细演示样例的更多相关文章

  1. 跨域CORS原理及调用详细演示样例

      上篇博客介绍了JSONP原理,其不足,就是仅仅能使用GET提交.若传输的数据量大.这个JSONP方式就歇菜了.那这篇博客就来介绍还有一种跨域介绍方案-CORS.   相对JSONP,CORS支持P ...

  2. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

  3. 跨域CORS原理及调用具体示例

    原文: https://www.cnblogs.com/keyi/p/6726089.html 上篇博客介绍了JSONP原理,其不足,就是只能使用GET提交,若传输的数据量大,这个JSONP方式就歇菜 ...

  4. JDBC连接MySQL数据库及演示样例

    JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识         JDBC(Java Data Base Connectivity,java数据库连接)是一种用 ...

  5. Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)

    由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

  6. JSONP跨域的原理解析( 一种脚本注入行为)

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...

  7. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

  8. Jsonp跨域访问原理和实例

    >>什么是跨域 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...

  9. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

随机推荐

  1. 能力成熟度模型CMM

    能力成熟度模型(Capability Maturity Model,英文缩写为CMM)[1]是 一种开发模型.Carnegie Mellon大学的研究人员从美国国防部合同承包方那里收集数据并加以研究, ...

  2. FFmpeg YUV2RGB

    AVFrame* YUV2RGB( AVCodecContext * avctx, AVFrame * frame ) { AVFrame* pFrameRGB=NULL; pFrameRGB=avc ...

  3. zendstudio采用xdebug调试,断点不停的解决

    查看zendstudio里windows->preferences->PHP->PHP Executables,编辑列表项,弹出框的Debugger看看还是不是xdebug.

  4. Linux进程间通信:管道,信号量,消息队列,信号,共享内存,套接字

    Linux下的进程通信手段基本上是从UNIX平台上的进程通信手段继承而来的.而对UNIX发展做出重大贡献的两大主力AT&T的贝尔实验室及BSD(加州大学伯克利分校的伯克利软件发布中心)在进程间 ...

  5. iOS开源项目:FlatUIKit

    FlatUIKit是iOS中具有扁平化风格的UI(Flat UI)组件.FlatUIKit的设计灵感来源于Flat UI和Kyle Miller.FlatUIKit中的组件是通过扩展(category ...

  6. HDU 4649 - Professor Tian(2013MUTC5-1007)(概率)

    不知道这题算作什么类型的题目,反正很巧妙,队友小杰想了没一会就搞定了 为了学习这种方法,我也搞了搞,其实思路不难想,位运算嘛,只有0和1,而且该位的运算只影响该位,最多20位,一位一位地计算即可,只需 ...

  7. django 实现上传文件功能

    需求:自己写一个文件上传功能 代码: urls.py from django.conf.urls import url from django.contrib import admin from ap ...

  8. 利用js动态创建<style>

    var nod = document.createElement(“style”), str = “body{background:#000;color:#fff} a{color:#fff;text ...

  9. perforce 使用教程(zz)

    http://www.perforce.com/documentation/perforce_technical_documentation http://blog.csdn.net/brucexu1 ...

  10. 【性能测试】Linux性能监控命令——sar详解

    转载:https://blog.csdn.net/mig_davidli/article/details/52149993 sar命令可以从文件的读写情况.系统调用的使用情况.磁盘I/O.CPU效率. ...