深入浅出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" onclick="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,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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。