昨天朋友想做個圖片懶加載的效果，朋友是前端的，我這邊給他提供數據，程序寫好了放到服務器上，本地測試訪問時卻報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標簽向服務器跨域請求數據，然後服務端返回相應的數據並動態執行回調函數
