• 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要对应的修改一下才能正确执行,代码如下:

         服务器代码:

     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标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数

  • 相关阅读:
    [poj_3469]多核CPU
    割点与桥,强连通分量,点双,边双[poj_1236]学校网络
    Iview 启动报错 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
    修改JAVA_HOME失效
    命令模式
    gradle implementation runtimeOnly 和api 区别
    spring boot 整合 RabbitMQ 错误
    关于技术的想法
    eclipse 背景绿豆沙颜色
    抽象工厂模式
  • 原文地址:https://www.cnblogs.com/jean69/p/6135671.html
Copyright © 2020-2023  润新知