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

巴特西

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

最新文章

热门文章