详细解密jsonp跨域请求


Posted in Javascript onApril 15, 2015

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>

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

详细解密jsonp跨域请求

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>

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

详细解密jsonp跨域请求

在用json格式看下

详细解密jsonp跨域请求

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>

通过后台代码,可知

详细解密jsonp跨域请求

然后在监视器上看看

详细解密jsonp跨域请求

详细解密jsonp跨域请求

发现在浏览器端,弹出了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>

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

详细解密jsonp跨域请求

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

Javascript 相关文章推荐
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 #Javascript
javascript中Math.random()使用详解
Apr 15 #Javascript
js数组依据下标删除元素
Apr 14 #Javascript
js获取数组的最后一个元素
Apr 14 #Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 #Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 #Javascript
jQuery获得子元素个数的方法
Apr 14 #Javascript
You might like
PHP 第三节 变量介绍
2012/04/28 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php实现递归的三种基本方式
2020/07/04 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
学习Node.js模块机制
2016/10/17 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
使用Vue实现一个树组件的示例
2020/11/06 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
跟老齐学Python之Import 模块
2014/10/13 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
司法所长先进事迹
2014/06/02 职场文书
应聘教师自荐书
2014/06/16 职场文书
护士自荐信范文
2015/03/25 职场文书
小学班级口号大全
2015/12/25 职场文书
四年级数学教学反思
2016/02/16 职场文书