详细解密jsonp跨域请求

前端技术 2023/09/06 JavaScript

1.什么是跨域请求：

服务器A上的一个页面，要请求服务器B上的一个处理程序，这就叫做跨域请求

本次的测试页面为：

处理程序kimhandler.ashx，如下：

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

另一张处理程序handler.ashx如下：

<%@ 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无法实现跨域请求

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

查看监视器，发现没有返回任何请求报文体

3.使用script标签，可以实现跨域请求

测试代码如下：

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

查看监视器，可以看到，有返回请求报文体

在用json格式看下

4.使用js方式，在浏览器端，读取响应是数据

测试代码如下，注意换了一个处理程序

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

通过后台代码，可知

然后在监视器上看看

发现在浏览器端，弹出了kim还有18

5.使用Jq来实现跨域请求（内部原理就是为我们创建了一个script标签）

代码如下

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

点击按钮后，可以看到效果，再看下监视器


以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/16777

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案