详细解密jsonp跨域请求

网络编程 2025/5/8 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

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="/UploadFiles/2021-04-02/kimhandler.ashx">

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

在用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="/UploadFiles/2021-04-02/handler.ashx">

通过后台代码，可知

然后在监视器上看看


发现在浏览器端，弹出了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="/UploadFiles/2021-04-02/jquery-1.9.0.js">

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



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

                                
                                
                                    jsonp跨域请求,jsonp跨域,jsonp跨域的原理 
                                
                                    标签：
                                        jsonp跨域请求,jsonp跨域,jsonp跨域的原理
                                     

                                蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“详细解密jsonp跨域请求”

暂无详细解密jsonp跨域请求的评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2025年05月08日

详细解密jsonp跨域请求

jsonp跨域请求,jsonp跨域,jsonp跨域的原理

jQuery控制Div拖拽效果完整实例分析

jQuery插件zoom实现图片全屏放大弹出层特效

评论“详细解密jsonp跨域请求”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接