Décrypter la requête inter-domaines jsonp dans les compétences detail

Décrypter la requête inter-domaines jsonp dans les compétences detail_javascript

WBOY

Libérer： 2016-05-16 16:04:13

original

1148 Les gens l'ont consulté

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;
    }
  }
}

Copier après la connexion

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;
    }
  }

}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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&#63;callbackFun=getData"></script>
 </head>
<body>
  
</body>
</html>

Copier après la connexion

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>

Copier après la connexion

Après avoir cliqué sur le bouton, vous pouvez voir l'effet, puis regarder le moniteur