Jquery: ajax cross-origin request processing, jqueryajax cross-Origin

Jquery: ajax cross-origin request processing, jqueryajax cross-Origin

Yesterday, my friend wanted to make a picture of the lazy loading effect. My friend was a front-end. I provided him with data, and the program was written and put on the server. During the local test access, the jquery cross-domain problem was reported, so I asked du Niang to learn how to deal with jquey. There are many reference articles on the Internet, but I didn't take a closer look. This situation may lead to incomplete knowledge. I hope I can understand and find two solutions, the details are as follows:

1,Directly Add the following code to ashx:

 context.Response.Headers.Add("Access-Control-Allow-Origin", "*");

Access-Control-Allow-Origin :*Indicates that cross-Origin Access is allowed for any domain name. If you need to specify a domain name to Allow cross-Origin Access, you only need to change Access-Control-Allow-Origin: * to Access-Control-Allow-Origin: allowed domain name, for example: Add ('access-Control-Allow-Origin: http://www.client.com ');

2,Without Access-Control-Allow-Origin, the server returns data in the jsonp format (if you do not understand it,Note: The Return format of jsonp is sucess ([{},{},...]) or success ({});When the server returns jsonp data, the front-end js needs to be modified before it can be correctly executed. The Code is as follows:

Server code:

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" + 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 data format 25} 26 27 // --------------- extension class ------------------ 28 public class AjaxData29 {30 public string ImageUrl {get; set ;} 31 public string Price {get; set;} 32 public string Text {get; set;} 33}

View Code

Frontend js call:

1 $. ajax ({2 url: 'http: // www.jean69.com/FeiShen/Ajax/Data2.ashx', 3 type: 'get', 4 ype: 'jsonp', 5 jsonp: 'callback', 6 jsonpCallback: "success", // specify the callback function as 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

Knowledge Popularization:

A. What is jsonp:JSONP (JSON with Padding) is an unofficial protocol that allows the server to integrate Script tags to return to the client, cross-origin access is implemented through javascript callback (this is only a simple implementation form of JSONP)

B. Roles of jsonp:Due to the restrictions of the same-origin policy, XmlHttpRequest only allows requests to resources of the Current Source (domain name, protocol, Port). To implement cross-origin requests, you can use the script tag to implement cross-origin requests, then the JSON data is output on the server side and the callback function is executed to solve cross-Origin data requests.

C. How to Use JSONP:The above example is actually a simple form of JSONP. After the client declares the callback function, the client requests data to the server through the script tag, and then the server returns the corresponding data and dynamically executes the callback function.