zoukankan      html  css  js  c++  java
  • jsonp跨域原理解析

    前言: 跨域请求是前台开发中经常遇到的场景,但是由于浏览器同源策略,导致A域下普通的http请求没法加载B域下的数据,跨域问题由此产生。但是通过script标签的方式却可以加载非同域下的js,因此可以利用这一特性,进行跨域数据请求。

    先看一下跨域导致的问题,测试域分别为 localhost 和 www.icity366.com, 下文分别对应A域和B域,测试文件为A域下的 data.jsp, 我们在A(localhost)域下请求B(www.icity366.com)域下的数据,看一下data.jsp中关键代码:

        $.ajax({
    		url : "http://www.icity366.com:8080/addresslist/test/Data.do?method=getData",
    		data : {callback : "getData"},
    		//dataType : "json",
    		type : "get",
    		success : function(data){
    			alert(data);
    		},
    		error : function(XmlHttpRequest,textStatus,errorThrown){
    			//debugger;
    			alert(textStatus);
    		}
    	  })
    

     结果为alert("error"),浏览器提示跨域:

      

    利用script标签解决跨域

    在data.jsp页面中定义好回调方法,

    function getData(data){
      alert(data.name);
    }
    

    通过script标签引用js:

    <script type="text/javascript" src="http://www.icity366.com:8080/addresslist/test/Data.do?method=getData&callback=getData"></script>
    

    服务器端java代码如下:

    String callback = request.getParameter("callback");
    Map<String,String> data = new HashMap<String,String>();
    data.put("name", "Liyx");
    data.put("age", "25");
    String dataJson = JsonUtils.convertToString(data);//Map->json
    response.getWriter().write(callback+"("+dataJson+")");
    

     请求结果:

      java端返回  getData({"age":"25","name":"Liyx"}),页面执行getData(),弹出 Liyx, 说明<script>标签可跨域获得数据。

     JSONP方式跨域写法

      json核心就是:允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。先看一下写法:

    var url = "http://www.icity366.com:8080/addresslist/test/Data.do?method=getData&callback=?";
    	$.getJSON(url,function(data){
    		alert(data.name);  //Liyx
    	})
    

      callback=? 先传递?过去,jquery会自动生成一个全局函数来替换callback=?中的问号,看一下java端的输出,

    jQuery171004718876606784761_1411549835461({"age":"25","name":"Liyx"}),长串即为生成的全局函数,该function会自动销毁,并把数据传递到回调方法中。

  • 相关阅读:
    Call KernelIoControl in user space in WINCE6.0
    HOW TO:手工删除OCS在AD中的池和其他属性
    关于新版Windows Server 2003 Administration Tools Pack
    关于SQL2008更新一则
    微软发布3款SQL INJECTION攻击检测工具
    HyperV RTM!
    OCS 2007 聊天记录查看工具 OCSMessage
    CoreConfigurator 图形化的 Server Core 配置管理工具
    OC 2007 ADM 管理模板和Live Meeting 2007 ADM 管理模板发布
    Office Communications Server 2007 R2 即将发布
  • 原文地址:https://www.cnblogs.com/teamobaby/p/3991240.html
Copyright © 2011-2022 走看看