• JS跨域请求 JSONP B/S全代码


    Ajax直接请求普通文件存在跨域无权限访问的问题,
    甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

    Web页面上调用js文件时则不受是否跨域的影响
    (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)



    实现原理:
        1.客户端html写一个函数,其中形参就是所需要的数据;
        2.发送函数名称给服务器,告诉服务端一会需要调用的函数;
        3.服务端获取函数名参数,设置编码格式为 text/javascript    
        4.服务器端打印如  response.getWriter().write("a({id:1})");







    客户端代码:

    javascript:

     <script type="text/javascript">
        // 得到航班信息查询结果后的回调函数
        var flightHandler = function(data){
            alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
        };
        // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
        var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
        // 创建script标签,设置其属性
        var script = document.createElement('script');
        script.setAttribute('src', url);
        // 把script标签加入head,此时调用开始
        document.getElementsByTagName('head')[0].appendChild(script);
        </script>

    Jquery:

     <script type="text/javascript" src=jquery.min.js"></script>
          <script type="text/javascript">
         jQuery(document).ready(function(){
            $.ajax({
                 type: "get",
                 async: false,
                 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
                 dataType: "jsonp",
                 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                 jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",
                            jQuery会自动为你处理数据
                 success: function(json){
                     alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
                 },
                 error: function(){
                     alert('fail');
                 }
             });
         });
         </script>
     







    服务器端代码:


    java :

    boolean jsonP = false;
    String cb = request.getParameter("callback");
    if (cb != null) {
        jsonP = true;
        response.setContentType("text/javascript");
    } else {
        response.setContentType("application/x-json");
    }
    Writer out = response.getWriter();
    if (jsonP) {
        out.write(cb + "(");
    }
    out.print(dataBlock.toJsonString());
    if (jsonP) {
        out.write(");");
    }




    C#:


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
    namespace TC.JsonService.Handler
    {
        /// <summary>
        /// FlightHandler 的摘要说明
        /// </summary>
        public class FlightHandler : IHttpHandler
        {
     
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/javascript";
                context.Response.Cache.SetNoStore();
                string strJson = "localHandler({'code': 'CA1998','price': 1780,'tickets': 5});";
                context.Response.Write(strJson);
            }
     
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

     参考文章:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

  • 相关阅读:
    (转)tomcat 安全配置文档
    (转)nginx 安全配置文档
    (转)scipy详解
    (转)matplotlib实战
    (转)Python3的四舍五入round()函数坑爹?不,更科学!
    (转)p解决 java.util.prefs.BackingStoreException 报错问题
    (转)asyncio --- 异步 I/O
    (转)pycharm快捷键、常用设置、配置管理
    (转)db2top详解
    (转)Db2 数据库常见堵塞问题分析和处理
  • 原文地址:https://www.cnblogs.com/j2ee-web-01/p/7151702.html
Copyright © 2020-2023  润新知