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     }

    前端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             });

  知識普及： 

    a、什麼是jsonp：JSONP(JSON with Padding)是一個非官方的協議，它允許在伺服器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）

    b、jsonp的作用：由於同源策略的限制，XmlHttpRequest只允許請求當前源（功能變數名稱、協議、埠）的資源，為了實現跨域請求，可以通過script標簽實現跨域請求，然後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求

    c、如何使用JSONP：上面的實例實際上是JSONP的簡單表現形式，在客戶端聲明回調函數之後，客戶端通過script標簽向伺服器跨域請求數據，然後服務端返回相應的數據並動態執行回調函數