Jsonp实现跨域请求数据

最新推荐文章于 2024-06-20 20:55:24 发布

小步快跑-

最新推荐文章于 2024-06-20 20:55:24 发布

阅读量1.7k

点赞数 1

分类专栏： C#、类库、方法 web前端文章标签： Jsonp实现跨域请求数据

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/chinaplan/article/details/17094741

版权

C#、类库、方法同时被 2 个专栏收录

84 篇文章 1 订阅

订阅专栏

web前端

56 篇文章 0 订阅

订阅专栏

深入浅出JSONP--解决ajax跨域问题：http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

一、前端页面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>旅游见闻</title>
    <meta name="description" content="">
    <meta name="keywords" content="" />
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon-precomposed" href="http://10.1.13.8:814/apple-touch-icon-144x144-precomposed.png" />
    <link rel="apple-touch-startup-image" href="http://10.1.13.8:814/apple-touch-icon-144x144-precomposed.png" />
    <link rel="stylesheet" href="http://10.1.13.8:814/content/m/css/core.css">
    <script src="http://r01.uzaicdn.com/Scripts/m/sea-modules/seajs/seajs/2.1.1/sea.js"></script>
    <script src="http://r01.uzaicdn.com/Scripts/m/config.min.js"></script>
     <script type="text/javascript">
         var isRequestEnabled = true;

         seajs.use(['http://r01.uzaicdn.com/scripts/m/core.min'], function (core) {
             $(function () {
                 $('#zixun-list').find('.fn-more').on('click', getData);
             });
             $().ready(function () {
                   getCategoryName();
                   getData();
             });
         });

           function getCategoryName() {
               var CategoreID = $("#CategoreID").html();
               $.ajax({
                   url: 'ArticleHandler.ashx?queryType=1&CategoreID=' + CategoreID + '&callback=?',
                 dataType:"jsonp",
                 success: function (data) {
                     $("#categoryName").html(data.CategoryName);
                 }
             })
         }

         function getData() {
             if (isRequestEnabled == false) {
                 return false;
             }
             var o = $(this);
             var op = parseInt(o.attr('data-page'));
             var CategoreID = $("#CategoreID").html();
             var PageSize = $("#PageSize").html();
             $.ajax({

                 url: 'ArticleHandler.ashx?pnum=' + op + '&CategoreID=' + CategoreID + '&PageSize=' + PageSize + '&callback=?',
                 dataType: "jsonp",
                 success: function (data) {
                     var msg =data;
                    
                     if (msg.length > 0) {
                         for (var i = 0; i < msg.length; i++) {
                             var content = msg[i].ArticleContent;
                             if (content != undefined && content.length > 100) {
                                 content = content.substring(0, 100);
                             }
                             var data = "<li class='mb5' style='clear:both;'>";
                             data += "<a href='" + msg[i].ArticleUrl + "' class='block clearfix'><p class='tit f14 f333'>" + msg[i].ArticleTitle + "</p><div class='pic mr10'><img src='" + msg[i].ArticleListImg + "' width='50' height='45' /></div><div class='left-txt'>" + content + "</div></a>";
                             data += "</li>";
                             $('#zixun-list').find('ul').append(data);
                         }
                         o.attr('data-page', op + 1);
                     } else {
                         o.text('没有更多了..');
                         isRequestEnabled = false;
                     }
                 }
             })
             return false;
         }
        
        
     </script>
    <style>
        .zixun-list li { border-bottom:1px solid #eee;}
        .zixun-list li:last-child { border-bottom:none;margin-bottom:0;}
        .zixun-list li a { display:block;}
        .zixun-list li .pic {width:50px;float:left;margin-top:4px; }
        .zixun-list li .txt {margin-left:60px;word-wrap:break-word;}
        .zixun-list li .tit { overflow:hidden;text-overflow:ellipsis;height:22px;white-space:nowrap;}
        .left-txt{float:left;color:#999;font-size:12px;width:560px;}
    </style>

   
</head>
<body>

    <div class="wrap w reg">
        <header class="fn-header">
            <div class="fl icon back" οnclick="javascript:history.go(-1);"></div>
            <span class="tit" id="categoryName"></span>
        </header>
        <article>
             
            <div class="zixun-list p10" id="zixun-list">
                <ul>
                    
                </ul>

                <p data-action="sort" data-page="2" class="fn-more" id="getmore"><a href="#">点击查看更多...</a></p>

            </div>

        </article>
        <footer class="fn-footer">
            <p class="p1"><a href="http://u.uzai.com/mobile/login">登录</a><a href="http://u.uzai.com/mobile/reg">注册</a><a href="http://u.uzai.com/mobile/order">我的订单</a><a href="http://m.uzai.com/about.html">关于悠哉</a><a href="http://m.uzai.com/">首页</a></p>
            <p class="p2 orange"><a href="http://www.uzai.com">电脑版</a><a href="http://wap.uzai.com/app">客户端</a> <span><a href="#">TOP</a></span></p>
            <p class="p3">©2013 悠哉旅游网		预订热线：400-000-8888</p>
        </footer>
        <div style="display:none" id="CategoreID">{$CategoreID}</div>
         <div style="display:none" id="PageSize">5</div>
    </div>
    <script type="text/javascript">
        var _gaq = _gaq || []; //定义GA变量数组。
        _gaq.push(['_setAccount', 'UA-24479793-2']); //设置本跟踪代码所对应的Google帐户。
        _gaq.push(['_trackPageview']); //定义按页面跟踪
        (function () {//定义匿名的执行方法
            var ga = document.createElement('script'); //定义GA的脚本Dom对象。到时候会appendChild到Document中
            ga.type = 'text/javascript'; //不解释
            ga.async = true; //定义GA数据传输方式为异步传输。
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; //定义GA的JS源路径，自动取的，主要是做了一个协议判断，意味着GA可以跟踪htts网页和ssl网页，当你 的页面是http时就去http://www.google-analytics.com/ga.js取代码。当你是https页面时就去https://www.google-analytics.com/ga.js取代码。
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s); //添加GA代码
        })();
    </script>
</body>
</html>

二、jsonp请求的服务类

注:(此类可以为其他域名下)

<%@ WebHandler Language="C#" Class="ArticleHandler" %>

using System;
using System.Web;

public class ArticleHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string responseJson = string.Empty;
        int pageIndex=5;
        int categoryId=0;
        int pageSize=0;

        //获取回调函数名
        string callback = context.Request.QueryString["callback"];
        
        //请求的页码
        string pageIndexStr = context.Request.QueryString["pnum"];
        if (string.IsNullOrEmpty(pageIndexStr) || !Int32.TryParse(pageIndexStr, out pageIndex))
        {
            //传递的pageIndex无效，则设置为1
            pageIndex = 1;
        }

        //文章列表分类ID
        string categoryStr = context.Request.QueryString["CategoreID"];
        //文章列表分类页面个数
        string pageSizeStr = context.Request.QueryString["PageSize"];
        if (!string.IsNullOrEmpty(pageSizeStr) && Int32.TryParse(pageSizeStr, out pageSize))
        {
            //如果页面个数为空，则设置为
            pageSize = Convert.ToInt32(pageSizeStr);
        }
        
        if (!string.IsNullOrEmpty(categoryStr) && Int32.TryParse(categoryStr, out categoryId))
        {
            Uzai.Shop.BLL.BLLUzaiPhone.BLLUzaiPhoneAnnounce bllPhone = new Uzai.Shop.BLL.BLLUzaiPhone.BLLUzaiPhoneAnnounce();
            string queryType = context.Request.QueryString["queryType"];
            if (!string.IsNullOrEmpty(queryType))
            {
                //如果queryType参数存在则是请求分类名称
                responseJson = bllPhone.GetCategoryById(categoryId).CategoryName;
                responseJson = "{\"CategoryName\":\"" + responseJson + "\"}";
            }
            else
            {
                //请求文章数据-Json
                responseJson = GetPages(categoryId, pageIndex, pageSize);
            }
        }
        context.Response.ContentType = "application/json";
        context.Response.Write(callback + "(" + responseJson + ")");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}
 /// <summary>
        /// 按照文章分类编号来获取文章列表-分页
        /// </summary>
        /// <param name="categoryId">文章分类编号</param>
        /// <param name="startIndex">起始下标</param>
        /// <param name="pageIndex">每页个数</param>
        /// <param name="allCount">总条数</param>
        /// <returns>该文章分类下的文章列表</returns>
        public IList<PhoneArticleListPage> GetArticleListByCategoryId(int categoryId, int pageIndex, int pageSize, out int allCount)
        {
            IList<PhoneArticleListPage> list = new List<PhoneArticleListPage>();

            #region 得到总条数
            allCount = 0;
            string allCountSql = "select Count(1) FROM [UzaiPhoneArticleListPage] where SourceCategoryID = {0}  ; ";
            allCountSql = string.Format(allCountSql, categoryId);
            object obj = SqlHelper.ExecuteScalar(SqlHelper.connstr, System.Data.CommandType.Text, allCountSql);
            int count;
            if (obj != null && Int32.TryParse(obj.ToString(), out count))
            {
                allCount = count;
            }
            #endregion

            #region 得到文章
            string sql = "select [ID],[ArticleTitle],[ArticleListImg],[ArticleContent],[ArticleUrl],[SourceCategoryID],[CreateTime],[Sort] from "
            + "(SELECT *, Row_Number() over(order by Sort asc) RowID "
                                + "FROM [UzaiPhoneArticleListPage] where SourceCategoryID = {0}) temp "
                                + "where temp.RowID > {1} and temp.RowID < {2} ";
            int startIndex = (pageIndex - 1) * pageSize;
            int endIndex = pageIndex * pageSize + 1;
            sql = string.Format(sql, categoryId, startIndex, endIndex);
            SqlDataReader reader = SqlHelper.ExecuteReader(SqlHelper.connstr, System.Data.CommandType.Text, sql);
            try
            {
                if (reader != null)
                {
                    PhoneArticleListPage page;
                    while (reader.Read())
                    {
                        page = new PhoneArticleListPage();
                        page.ID = reader.GetInt32(0);
                        page.ArticleTitle = reader.GetString(1);
                        page.ArticleListImg = reader.GetString(2);
                        page.ArticleContent = reader.GetString(3);
                        page.ArticleUrl = reader.GetString(4);
                        page.SourceCategoryID = reader.GetInt32(5);
                        page.CreateTime = reader.GetDateTime(6);
                        list.Add(page);
                    }
                    reader.Close();
                }
            }
            catch (Exception)
            {
                list.Clear();
            }
            #endregion

            return list;
        }