Jquery:ajax跨域请求处理
昨天朋友想做个图片懒加载的效果,朋友是前端的,我这边给他提供数据,程序写好了放到服务器上,本地测试访问时却报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跨域请求处理的更多相关文章
- JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...
- NodeJ node.js Jquery Ajax 跨域请求
Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...
- 关于JQuery Ajax 跨域 访问.net WebService
关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...
- jquery+ajax跨域请求webservice
最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- jquery ajax跨域请求详解
本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...
- jquery ajax跨域的完美解决方法(jsonp方式)
ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载 ...
- jquery ajax跨域调用
客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...
- 关于jquery ajax跨域请求获取response headers问题
背景:最近项目jwt用户认证方式,关于jwt本人就不再赘述,大家可自行百度. jwt token基本流程是这样的: 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一 ...
- Springmvc ajax跨域请求处理
上次给一个网站写网站 前后端分离 最后跪在ajax跨域上面了 自己在网上找了个方法 亲试可用 记录一下 写一个类 继承HandlerInterceptorAdapter package co ...
随机推荐
- asp.net 多个文件同时下载
1.首先读取文件夹下的文件,可能同时存在多个文件 2.选中文件,然后点击下载,同时可以选择多个文件. 思路:通过生产压缩包的形式进行下载,然后再清楚压缩包,这样用户可以一次性全部下载下来. 一.获取目 ...
- 第一部分:IBM量子体验
(一)量子世界 今天的计算机使用标准的(或用物理学家的话来说,“经典的”)计算模型来执行计算与处理信息,此计算模型要追溯到图灵(Turing)和冯・诺伊曼(Von Neumann)时期.在此模型 ...
- parallels无法启动之大乌龙-流水账版
欢迎访问我的blog:blog.thinkinside.me 早上到公司,像往日一样,开电脑倒茶喝水. 回到座位打开parallels desktop,发现不对,打开PD非常的慢.显示正在初始 ...
- wwdc2016-session707 Notifications(draft)
Introduction to Notificationshttps://developer.apple.com/wwdc2016/707 通知这哥们说话有点不清晰啊. 远程通知本地通知 可以被操作的 ...
- ArcGIS Geodatabase版本控制机制的学习总结
本文是最近内部的一个学习的自我整理,只有关键信息,如果需要详细了解,请参阅ArcGIS帮助文档: http://resources.arcgis.com/zh-cn/help/main/10.1/in ...
- 图解 & 深入浅出Java初始化与清理:构造器必知必会
Writer :BYSocket(泥沙砖瓦浆木匠) 微 博:BYSocket 豆 瓣:BYSocket FaceBook:BYSocket Twitter ...
- C++中文件按行读取和逐词读取 backup
http://blog.csdn.net/zhangchao3322218/article/details/7930857 #include <iostream>#include &l ...
- 本人第一个开源代码,NETSpider 网络蜘蛛采集工具
NETSpider网站数据采集软件是一款基于.Net平台的开源软件.软件部分功能是基本Soukey软件进行开发的.这个版本采用VS2010+.NET3.5进行开发的.NETSpider采摘当前提供的主 ...
- eclipse 手动/自动安装插件
只要你的Eclipse的压缩包,一般为xxx.zip,其内部包含了对应的features和plugins文件夹,(不管是否还有content.jar和artifacts.jar)则都可以: 要么手动解 ...
- sp_executesql 两种写法
写法1: AlTER PROCEDURE TryAgain @ReturnValue int output AS declare @aa nvarchar(), @ForumID int, @coun ...