Jquery:ajax跨域请求处理

2018-06-22 07:41:23来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

   昨天朋友想做个图片懒加载的效果,朋友是前端的,我这边给他提供数据,程序写好了放到服务器上,本地测试访问时却报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要对应的修改一下才能正确执行,代码如下:

     服务器代码:

 1  protected string LazyData()
 2     {
 3         List<AjaxData> list = new List<AjaxData>();
 4         int pageIndex = Convert.ToInt32(Request.Params["pageIndex"]);
 5         int pageSize = Convert.ToInt32(Request.Params["pageSize"]);
 6         int start = ((pageIndex - 1) * 10) + 1;
 7         int end = pageIndex * pageSize;
 8         string sql = @"SELECT * from (select ROW_NUMBER() OVER (ORDER BY id) as num,* from FeiShen) tt WHERE  tt.num BETWEEN " + start + " AND " + end + "";
 9         DataTable table = SqlHelper.ExcuteToTable(sql);
10         if (table != null && table.Rows.Count > 0)
11         {
12             foreach (DataRow item in table.Rows)
13             {
14                 AjaxData data = new AjaxData()
15                 {
16                     ImageUrl = item["ImageUrl"].ToString(),
17                     Price = item["Price"].ToString(),
18                     Text = item["Text"].ToString()
19                 };
20                 list.Add(data);
21             }
22         }
23         System.Web.Script.Serialization.JavaScriptSerializer ser = new System.Web.Script.Serialization.JavaScriptSerializer();
24         return "success("+ ser.Serialize(list)+")";//这里拼接jsonp数据格式
25     }
26 
27     //-------------拓展类------------------
28     public class AjaxData
29     {
30         public string ImageUrl { get; set; }
31         public string Price { get; set; }
32         public string Text { get; set; }
33     }
View Code

    前端js调用:  

 1   $.ajax({
 2                 url: 'http://www.jean69.com/FeiShen/Ajax/Data2.ashx',
 3                 type: 'GET',
 4                 dataType: 'jsonp',
 5                 jsonp: 'callback',
 6                 jsonpCallback: "success",//这里指定回调函数为success
 7                 cache: false,
 8                 data: { pageIndex: 1, pageSize: 10, type: 'lazyData' },
 9                 success: function (data) {
10                     if (data.length > 0)
11                     {
12                         for (var i = 0; i < data.length; i++) {
13                             var str = "<ul><li>" + data[i].ImageUrl + "</li></ul>";
14                             $("#content").append(str);
15                         }
16                     }
17                 }
18             });
View Code

  知识普及: 

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

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

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:网站 robots.txt 文件编写

下一篇:如何写出安全的API接口?接口参数加密签名设计思路