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跨域请求处理

最新文章

热门文章