Code d'implémentation du service Web d'appel inter-domaines Ajax

Récemment, ajax a rencontré des problèmes inter-domaines lors de l'accès au service Web. J'ai recherché des informations sur Internet et je les ai résumées comme suit (beaucoup d'entre elles ont été copiées par d'autres qui pensaient que le résumé était bon)

2dcda89bdfbc250a51ff66fc178d73d0>

Tout d'abord, mon code implémenté :

Code front-end :

$.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);
 }
 });

Code côté serveur :

/// <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#

　Ce qui précède est le code d'implémentation pour appeler le serveur c#. Ce qui suit est le côté Java. Les paramètres peuvent être différents, mais les principes. sont les mêmes

　java:

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

PS : Le paramètre jsonp du client est utilisé pour passer des paramètres via l'url, et le nom du paramètre jsonpCallback est passé. C'est un peu difficile à prononcer en termes simples :

jsonp : " 

jsonpCallback : ""

À propos : dans le navigateur Chrome, vous pouvez également définir les informations d'en-tête sur le serveur context.Response.AddHeader("Access-Control-Allow-Origin" , "*"); et il n'est pas nécessaire de définir les paramètres ajax suivants

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

Il peut être obtenu par les données normales de la méthode de requête ajax.

Voici le principe. Après avoir lu ce que d'autres ont expliqué, cela semble raisonnable :

1. Un problème bien connu Ajax demande directement des fichiers ordinaires, ce qui provoque un accès non autorisé entre domaines. . Ne ​​vous inquiétez pas, c'est une page statique, une page Web dynamique, un service Web, WCF, ce n'est pas autorisé

　2. a également constaté que lors de l'appel de fichiers js sur la page Web, cela n'est pas affecté par le fait qu'il s'agisse d'un inter-domaine (non seulement cela, nous avons également constaté que toutes les balises avec l'attribut « src » ont des capacités inter-domaines, telles que <.>

3. On peut donc juger qu'au stade actuel, si vous souhaitez utiliser le côté Web pur (contrôle ActiveX, serveur), il n'y a qu'une seule possibilité d'accéder aux données entre domaines (sans compter les proxys, Websockets et autres méthodes qui appartiennent au futur HTML5), et c'est essayer de charger les données dans un fichier au format js sur le serveur distant pour l'appel du client et un traitement ultérieur ;

4. Nous savons déjà qu'il existe un format de données en caractères purs appelé JSON qui peut décrire des données complexes de manière concise. Ce qui est encore mieux, c'est que JSON est également pris en charge nativement par js, ce format peut donc être traité presque comme vous le souhaitez sur le client

5. Dans de cette façon, la solution est prête. Le client Web appelle le fichier au format js généré dynamiquement (généralement avec JSON comme suffixe) sur le serveur inter-domaines exactement de la même manière que le script appelant. Le serveur génère dynamiquement le fichier JSON pour y charger les données nécessaires au client

　6. Une fois que le client a appelé avec succès le fichier JSON, il obtient également les données dont il a besoin, le reste est à traiter et. afficher selon vos propres besoins.Cette méthode d'obtention de données à distance ressemble beaucoup à AJAX, mais elle est en fait différente

　7. Afin de faciliter l'utilisation des données par le client, elle est progressivement formée. protocole de transmission, les gens l'appellent JSONP. L'un des points clés de ce protocole est de permettre aux utilisateurs de transmettre un paramètre de rappel au serveur. Ensuite, lorsque le serveur renvoie des données, il utilisera ce paramètre de rappel comme nom de fonction pour envelopper le JSON. data. , afin que le client puisse personnaliser sa propre fonction pour traiter automatiquement les données renvoyées

Les développeurs intelligents peuvent facilement penser que tant que le script js fourni par le serveur est généré dynamiquement, l'appelant sera. très bien. Vous pouvez passer un paramètre pour dire au serveur "Je veux un code js qui appelle la fonction XXX, veuillez me le renvoyer." Ensuite, le serveur peut générer le script js en fonction des besoins du client et répondre 🎜>

Générer automatiquement une fonction de rappel pour vous et extraire les données de la méthode d'attribut de réussite à appeler

<!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>

Pour plus d'articles liés au code d'implémentation du service Web d'appel inter-domaines ajax , veuillez suivre le site Web PHP chinois