Business Requirements: An Independent News Server (A) provides external news. The customer (B) web page introduces A's js to request news.
The page generated by B's request message is generated by A's js.
A provides <script type = "text/javascript" src = "http: // newsdomain/js/news. js"> </script> for B to introduce.
Generally, ajax cannot perform cross-origin requests, as does $. ajax of jquery. All requests are rejected. This is caused by the browser's javascript Security Mechanism. When a request is sent, the server can obtain a response and generate data, but cannot return data to B across domains. After checking a lot of information, Jquery's jsonp can implement cross-origin requests and responses. However, the writing methods on the Internet are different, or even incomplete, and can be achieved through many studies. I will write the client writing method and the server writing method, and share it with colleagues.
First, write JavaScript code. News. js
Function requestNews (page, key, from, to, sort, language ){
$. GetJSON ("http: //" + domain + "/requestNews/getNews? Mehtodd = splitPage & page = "+ page +" & key = "+ k +" & from = "+ from +" & to = "+ to +" & sort = "+ sort + "& language =" + language + "& jsonpcallback =? ", Null, function call (json ){
Alert (json.info );
});
}
We have found that this url is particularly http ://******? Parameter = value: jsonpcallback =? . This is the jsonp method. Jquery is through jsonpcallback =? This parameter is found in the callback function call (json. Therefore, jsonpcallback =? Must be added to the request ?.
The server receives the value jsonpcallback. Which of the following statements will jquery use? For processing, jsonpcallback = jsonp1287199309053.
$. Getjson: You can check the parameter Writing Method of the function. $. Getjson (address, Data, callback function)
Because my data has already been merged with the URL, so my second parameter is null and can be left empty.
The following describes how the server processes and returns the requested data. There are only two key points.
1. JSON data format. 2. In order for the callback function to accept the return value, the value is written as a forward slash.
The first JSON data format is {Name: Value}. Check the data in detail.
Second. The server must receive jsonpcallback =?
String callback = Req. getparameter ("jsonpcallback ");
String strjson = {"info": "aaaa "};
String result = callback (strjson); // It is important here.
The printed result is
Jsonp1287199543662 ({"info": "aaaa"}) // you can check it here.
The focus is over. The last point is to return
Resp. setcontenttype ("application/JSON; charset = UTF-8"); // The format here is JSON
Resp. setheader ("cache-control", "No-Cache ");
Printwriter out = resp. getwriter ();
Out. Print (callback); // This is print, not write.
Out. Close ();
In this way, ajax cross-origin access is implemented. It is very simple to think back when many things are done. It is also annoying when you are confused, especially when the methods found on the Internet are ineffective. It's actually that simple. If you have any questions, you are welcome to join my QQ Group to discuss it together.