Entschlüsseln Sie die domänenübergreifende JSONP-Anfrage im Detail. Javascript-Kenntnisse-js-Tutorial-php.cn

Entschlüsseln Sie die domänenübergreifende JSONP-Anfrage im Detail. Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 16:04:13

Original

1122 Leute haben es durchsucht

1. Was ist eine domänenübergreifende Anfrage:

Eine Seite auf Server A muss einen Handler auf Server B anfordern. Dies wird als domänenübergreifende Anfrage bezeichnet

Die Testseite ist dieses Mal:

Der Handler kimhandler.ashx lautet wie folgt:

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

Nach dem Login kopieren

Ein weiterer handler.ashx lautet wie folgt:

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

}

Nach dem Login kopieren

2.Ajax kann keine domänenübergreifenden Anfragen implementieren

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

Nach dem Login kopieren

Überprüfen Sie den Monitor und stellen Sie fest, dass kein Anforderungsnachrichtentext zurückgegeben wurde

3. Verwenden Sie Skript-Tags, um domänenübergreifende Anfragen zu implementieren

Der Testcode lautet wie folgt:

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

Nach dem Login kopieren

Auf dem Monitor können Sie sehen, dass ein Anforderungsnachrichtentext zurückgegeben wird

Sehen Sie es sich im JSON-Format an

4. Verwenden Sie die js-Methode und lesen Sie auf der Browserseite die Antwort als Daten

Der Testcode lautet wie folgt. Bitte beachten Sie, dass ein Handler geändert wurde

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

Nach dem Login kopieren

Über den Hintergrundcode können Sie es wissen

Dann schauen Sie es sich auf dem Monitor an

Ich habe festgestellt, dass auf der Browserseite Kim und 18 aufgetaucht sind

5. Verwenden Sie Jq, um domänenübergreifende Anforderungen zu implementieren (das interne Prinzip besteht darin, ein Skript-Tag für uns zu erstellen)

Der Code lautet wie folgt

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

Nach dem Login kopieren

Nachdem Sie auf die Schaltfläche geklickt haben, können Sie den Effekt sehen und dann auf den Monitor schauen