1. Qu'est-ce qu'une requête inter-domaines :
Une page sur le serveur A doit demander un gestionnaire sur le serveur B. C'est ce qu'on appelle une requête inter-domaines
La page de test cette fois-ci est :
Le gestionnaire kimhandler.ashx est le suivant :
%@ WebHandler Language="C#" Class="KimHandler" %> using System; using System.Web; public class KimHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { string msg = "{\"name\":\"kim\",\"gender\":\"男\",\"age\":24}"; context.Response.Write(msg); } public bool IsReusable { get { return false; } } }
Un autre handler.ashx est le suivant :
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { string callbackName = context.Request.Params["callbackFun"]; string msg = callbackName+ "({\"name\":\"kim\",\"age\":\"18\"});"; context.Response.Write(msg); } public bool IsReusable { get { return false; } } }
2.Ajax ne peut pas implémenter de requêtes inter-domaines
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> var requestUrl = "http://qxw1192430265.my3w.com/kimhandler.ashx"; window.onload = function () { document.getElementById("btnAjax").onclick = function() { var xhr = new XMLHttpRequest(); xhr.open("get", requestUrl, true); xhr.setRequestHeader("If-Modified-Since", 0); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var res = xhr.responseText; alert(res); } } xhr.send(null); } } </script> </head> <body> <input type="button" id="btnAjax" value="点击" /> </body> </html>
Vérifiez le moniteur et constatez qu'aucun corps de message de demande n'a été renvoyé
3. Utilisez des balises de script pour implémenter des requêtes inter-domaines
Le code du test est le suivant :
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="http://qxw1192430265.my3w.com/kimhandler.ashx"></script> </head> <body> </body> </html>
En regardant le moniteur, vous pouvez voir qu'un corps de message de demande a été renvoyé
Regardez-le au format json
4. Utilisez la méthode js , et côté navigateur, lisez la réponse sous forme de données
Le code du test est le suivant, veuillez noter qu'un handler a été modifié
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> function getData(data) { for (var key in data) { alert(data[key]); } } </script> <script src="http://qxw1192430265.my3w.com/handler.ashx?callbackFun=getData"></script> </head> <body> </body> </html>
Grâce au code d'arrière-plan, vous pouvez savoir
Alors regardez-le sur le moniteur
J'ai trouvé que du côté du navigateur, Kim et 18 sont apparus
5. Utilisez Jq pour implémenter des requêtes cross-domaines (le principe interne est de créer une balise de script pour nous)
Le code est le suivant
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jquery-1.9.0.js"></script> <script> var requestUrl = "http://qxw1192430265.my3w.com/handler.ashx"; window.onload = function () { document.getElementById("btnJq").onclick = function() { $.ajax(requestUrl, { type: "get", //请求方式 dataType: "jsonp", //数据发送类型 jsonp: "callbackFun", //服务器端接收的参数 jsonpCallback: "fun", //js处理方法 success: function () { alert("成功"); } }); } } function fun(data) { for (var key in data) { alert(data[key]); } } </script> </head> <body> <input type="button" id="btnJq" value="Jq按钮" /> </body> </html>
Après avoir cliqué sur le bouton, vous pouvez voir l'effet, puis regarder le moniteur
Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.