Ajax cross-domain call webservice implementation code

Recently, ajax has encountered cross-domain problems when accessing webservice. I searched for information on the Internet and summarized it as follows (many of them are copied from other people’s summaries that I think are good)

　<>

First, my implemented code:

Front-end code:

$.ajax({
 type: "get",
 url: "http://localhost/Service1.asmx/getElevatorStatusJsonData?jsoncallback=?",
 dataType: "jsonp",
 jsonp: "json",
 data: "",
 success: function (result) {
 var data = eval(result);
 for (var i = 0; i < data.length; i++) {
 alert(data[i].ID + "--" + data[i].Name);
 }
 },
 error: function (a, b, c) {
 alert(c);
 }
 });

Server-side code:

/// <summary>
/// 获取状态数据信息
/// </summary>
/// <returns></returns>
[WebMethod]
public void getElevatorStatusJsonData()
{
List<List<DeviceInfo>> elevatordatas = new List<List<DeviceInfo>>();
List<SendDicdate> searchList = XmlSerializeHelper.XmlDeserializeFromFile<List<SendDicdate>>(@ConfigUtil.servicePath + ConfigUtil.getConfigByKey("xmlPath") + "查询指令信息.xml", Encoding.UTF8);
foreach (SendDicdate item in searchList)
{
string key = item.portno + "-" + item.bordrate + "-" + item.sendtype;
List<DeviceInfo> deviceInfoList = (List<DeviceInfo>)Context.Cache.Get(key);
elevatordatas.Add(deviceInfoList);
}
 
String result = "";
DataContractJsonSerializer json = new DataContractJsonSerializer(elevatordatas.GetType());
using (MemoryStream stream = new MemoryStream())
{
json.WriteObject(stream, elevatordatas);
result = Encoding.UTF8.GetString(stream.ToArray());
}
String jsoncallback = HttpContext.Current.Request["jsoncallback"];
result = jsoncallback + &#39;(&#39; + result + &#39;)&#39;;
HttpContext.Current.Response.Write(result);
HttpContext.Current.Response.End();
 
}

c

# The above is the implementation code for calling the c# server. The following is the java side. The parameters may be different, but the principles are the same

java:

String callbackFunName = context.Request["callbackparam"];
　　context.Response.Write(callbackFunName + "([ { \"name\":\"John\"}])");

PS: The jsonp parameter on the client side is used to pass parameters through the url, and the parameter name of the jsonpCallback parameter is passed. It is a bit difficult to pronounce. To put it in layman’s terms:

jsonp: ""

jsonpCallback:""

By the way: In the chrome browser, you can also set header information on the server context.Response.AddHeader("Access-Control-Allow-Origin", "*"); To achieve the purpose of cross-domain requests, and there is no need to set the following ajax parameters

dataType : "jsonp",
　　jsonp: "callbackparam",
　　jsonpCallback:"jsonpCallback1"

Data can be obtained in the normal ajax request method.

The following is the principle. I think it makes sense after reading what others have explained:

1. A well-known problem. Ajax directly requests ordinary files, which causes cross-domain unauthorized access. I don’t care about you. It is a static page, dynamic web page, web service, WCF. As long as it is a cross-domain request, it is not allowed;

　2. However, we also found that when calling js files on the Web page, it is not affected by whether it is cross-domain. (Not only that, we also found that all tags with the "src" attribute have cross-domain capabilities, such as

3. So it can be judged that at the current stage, if you want to use the pure web side (ActiveX control, server There is only one possibility to access data across domains (not counting proxies, Websockets and other methods that belong to future HTML5), and that is to try to load the data into a js format file on the remote server for client calling and further processing;

　4. We happen to already know that there is a pure character data format called JSON that can describe complex data concisely. What’s even better is that JSON is also natively supported by js, so the client can handle this format almost as desired. Data;

　5. In this way, the solution is ready. The web client calls the dynamically generated js format file (usually with JSON as the suffix) on the cross-domain server in exactly the same way as the calling script. It is obvious. , the reason why the server dynamically generates the JSON file is to load the data needed by the client.

　6. After the client successfully calls the JSON file, it also obtains the data it needs. , the rest is to process and display according to your own needs. This method of obtaining remote data looks very much like AJAX, but it is actually different.

　7. In order to facilitate the client to use the data, it is gradually formed. An informal transmission protocol, people call it JSONP. One of the key points of this protocol is to allow users to pass a callback parameter to the server. Then when the server returns data, it will use this callback parameter as a function name to wrap the JSON data. , so that the client can customize its own function to automatically process the returned data

Smart developers can easily think that as long as the js script provided by the server is dynamically generated, then the caller will be fine. You can pass a parameter to tell the server "I want a js code that calls the XXX function, please return it to me." Then the server can generate the js script according to the client's needs and respond

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script type="text/javascript">// 得到航班信息查询结果后的回调函数var flightHandler =function(data){
 alert(&#39;你查询的航班结果是：piao价 &#39;+ data.price +&#39; 元，&#39;+&#39;余piao &#39;+ data.tickets +&#39; 张。&#39;);
 }; // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）var url ="http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签，设置其属性var script = document.createElement(&#39;script&#39;);
 script.setAttribute(&#39;src&#39;, url);
 // 把script标签加入head，此时调用开始
//document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script></head><body></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title><script type="text/javascript" src=jquery.min.js"></script><script type="text/javascript">
 jQuery(document).ready(function(){
 $.ajax({
 type: "get",
 async: false,
 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
 dataType: "jsonp",
 jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){
 alert(&#39;您查询到航班信息：piao价： &#39;+ json.price +&#39; 元，余piao： &#39;+ json.tickets +&#39; 张。&#39;);
 },
 error: function(){
 alert(&#39;fail&#39;);
 }
 });
 }); </script></head><body></body></html>

.

Automatically generate a callback function for you and take out the data for the success attribute method to call

For more articles related to the implementation code of ajax cross-domain calling webservice, please pay attention to PHP Chinese website!