昨天朋友想做个图片懒加载的效果,朋友是前端的,我这边给他提供数据,程序写好了放到服务器上,本地测试访问时却报jquery跨域的问题,于是找度娘了解了一下jquey如何处理,网上有很多参考文章,但没细看,此情况会造成知识的不全面,望谅解,找了两个解决方案,具体如下:

1、直接在ashx中加入以下代码:

 context.Response.Headers.Add("Access-Control-Allow-Origin", "*");

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问,如果需要指定某域名才允许跨域访问,只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-                                                        Origin:允许的域名,例如:Add('Access-Control-Allow-Origin:http://www.client.com');

2、在不加 Access-Control-Allow-Origin 的情况下,在服务器返回jsonp(若不明白可度娘一下)格式的数据,注意:jsonp的返回格式为 sucess([{},{},...])或success({});当服务器返回jsonp的数据,前端js要对应的修改一下才能正确执行,代码如下:

服务器代码:

  protected string LazyData()
{
List<AjaxData> list = new List<AjaxData>();
int pageIndex = Convert.ToInt32(Request.Params["pageIndex"]);
int pageSize = Convert.ToInt32(Request.Params["pageSize"]);
int start = ((pageIndex - ) * ) + ;
int end = pageIndex * pageSize;
string sql = @"SELECT * from (select ROW_NUMBER() OVER (ORDER BY id) as num,* from FeiShen) tt WHERE tt.num BETWEEN " + start + " AND " + end + "";
DataTable table = SqlHelper.ExcuteToTable(sql);
if (table != null && table.Rows.Count > )
{
foreach (DataRow item in table.Rows)
{
AjaxData data = new AjaxData()
{
ImageUrl = item["ImageUrl"].ToString(),
Price = item["Price"].ToString(),
Text = item["Text"].ToString()
};
list.Add(data);
}
}
System.Web.Script.Serialization.JavaScriptSerializer ser = new System.Web.Script.Serialization.JavaScriptSerializer();
return "success("+ ser.Serialize(list)+")";//这里拼接jsonp数据格式
} //-------------拓展类------------------
public class AjaxData
{
public string ImageUrl { get; set; }
public string Price { get; set; }
public string Text { get; set; }
}

前端js调用:

   $.ajax({
url: 'http://www.jean69.com/FeiShen/Ajax/Data2.ashx',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: "success",//这里指定回调函数为success
cache: false,
data: { pageIndex: , pageSize: , type: 'lazyData' },
success: function (data) {
if (data.length > )
{
for (var i = ; i < data.length; i++) {
var str = "<ul><li>" + data[i].ImageUrl + "</li></ul>";
$("#content").append(str);
}
}
}
});

知识普及: 

    a、什么是jsonp:JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)

b、jsonp的作用:由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求

c、如何使用JSONP:上面的实例实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数

Jquery:ajax跨域请求处理的更多相关文章

  1. JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

    JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...

  2. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  3. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  4. jquery+ajax跨域请求webservice

    最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...

  5. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  6. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

  7. jquery ajax跨域的完美解决方法(jsonp方式)

    ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码     今天在项目中需要做远程数据加载 ...

  8. jquery ajax跨域调用

    客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...

  9. 关于jquery ajax跨域请求获取response headers问题

    背景:最近项目jwt用户认证方式,关于jwt本人就不再赘述,大家可自行百度. jwt token基本流程是这样的: 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一 ...

  10. Springmvc ajax跨域请求处理

    上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package co ...

随机推荐

  1. asp.net 多个文件同时下载

    1.首先读取文件夹下的文件,可能同时存在多个文件 2.选中文件,然后点击下载,同时可以选择多个文件. 思路:通过生产压缩包的形式进行下载,然后再清楚压缩包,这样用户可以一次性全部下载下来. 一.获取目 ...

  2. 第一部分:IBM量子体验

    (一)量子世界    今天的计算机使用标准的(或用物理学家的话来说,“经典的”)计算模型来执行计算与处理信息,此计算模型要追溯到图灵(Turing)和冯・诺伊曼(Von Neumann)时期.在此模型 ...

  3. parallels无法启动之大乌龙-流水账版

    欢迎访问我的blog:blog.thinkinside.me     早上到公司,像往日一样,开电脑倒茶喝水. 回到座位打开parallels desktop,发现不对,打开PD非常的慢.显示正在初始 ...

  4. wwdc2016-session707 Notifications(draft)

    Introduction to Notificationshttps://developer.apple.com/wwdc2016/707 通知这哥们说话有点不清晰啊. 远程通知本地通知 可以被操作的 ...

  5. ArcGIS Geodatabase版本控制机制的学习总结

    本文是最近内部的一个学习的自我整理,只有关键信息,如果需要详细了解,请参阅ArcGIS帮助文档: http://resources.arcgis.com/zh-cn/help/main/10.1/in ...

  6. 图解 & 深入浅出Java初始化与清理:构造器必知必会

    Writer      :BYSocket(泥沙砖瓦浆木匠) 微         博:BYSocket 豆         瓣:BYSocket FaceBook:BYSocket Twitter   ...

  7. C++中文件按行读取和逐词读取 backup

    http://blog.csdn.net/zhangchao3322218/article/details/7930857 #include  <iostream>#include  &l ...

  8. 本人第一个开源代码,NETSpider 网络蜘蛛采集工具

    NETSpider网站数据采集软件是一款基于.Net平台的开源软件.软件部分功能是基本Soukey软件进行开发的.这个版本采用VS2010+.NET3.5进行开发的.NETSpider采摘当前提供的主 ...

  9. eclipse 手动/自动安装插件

    只要你的Eclipse的压缩包,一般为xxx.zip,其内部包含了对应的features和plugins文件夹,(不管是否还有content.jar和artifacts.jar)则都可以: 要么手动解 ...

  10. sp_executesql 两种写法

    写法1: AlTER PROCEDURE TryAgain @ReturnValue int output AS declare @aa nvarchar(), @ForumID int, @coun ...