在html页面中，能实现跨域请求的是

第一：

<script src="http://localhost:59602/JsonpTest.ashx?callBack=callBack"></script>

第二：

  1. var img = document.createElement("img");
    img.src = "http://localhost:59602/JsonpTest1.ashx?callBack=callBack";
  2.  
  3. 现在根据这两种讲解跨域请求
  4.  
  5. 第一种：
    直接上代码：前台HTML页面
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         function callBack() {
  8.             alert("执行了");
  9.         }
  10.     </script>
  11.     <script src="http://localhost:59602/JsonpTest.ashx?callBack=callBack"></script>
  12. </head>
  13. <body>
  14.  
  15. </body>
  16. </html>

后台用的c#的一般处理程序

  1.         public void ProcessRequest(HttpContext context)
  2.         {
  3.             context.Response.ContentType = "text/plain";
  4.             string callBack= context.Request.QueryString["callBack"];
  5.             context.Response.Write(callBack+"()");
  6.         }

执行结果成功

第二种：

前台代码：html页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <!--<img src="http://localhost:59602/JsonpTest.ashx?callBack=callBack">-->
  9. </body>
  10. <script>
  11.     var img = document.createElement("img");
  12.     img.src = "http://localhost:59602/JsonpTest1.ashx?callBack=callBack";
  13.     // img.style.display = "none";
  14.     document.body.appendChild(img);
  15.     img.onload = function (data1) {
  16.         console.log("成功");
  17.     }
  18.     img.onerror = function (data1) {
  19.         console.log("失败");
  20.         console.log(data1);
  21.     }
  22. </script>
  23. </html>

后台代码：后台用的302重定向调整，直接返回图片也可以

  1.         public void ProcessRequest(HttpContext context)
  2.         {
  3.             context.Response.ContentType = "text/plain";
  4.             context.Response.Redirect("https://img.alicdn.com/tfs/TB1cokKnY_I8KJjy1XaXXbsxpXa-190-140.gif", false);
  5.         }

第三中：JQ的ajax封装的jsonp，本质就是用的上面两种

前台页面：HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.10.2.js"></script>
  7.     <script>
  8.         $(function () {
  9.             $.ajax({
  10.                 url:"http://localhost:59602/JsonpTest.ashx",
  11.                 dataType:"jsonp",
  12.                 jsonpCallback:"callback",
  13.                 success:function (data) {
  14.                     alert("回调成功");
  15.                 }
  16.             });
  17.         });
  18.  
  19.         function callback(data) {
  20.             alert("回调callback");
  21.         }
  22.     </script>
  23. </head>
  24. <body>
  25.  
  26. </body>
  27. </html>

后台代码用的第一中的。

结果：查看网络请求，本质还是第一种

后台接口永续跨域详解：https://blog.csdn.net/hehexiaoxia/article/details/61916737

jsonp跨域请求及本质的更多相关文章

  1. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  2. JSONP跨域请求数据报错 “Unexpected token :”的解决办法

    原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...

  3. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  4. Django学习---jsonp跨域请求

    jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...

  5. jsonp跨域请求响应结果处理函数(python)

    接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...

  6. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  7. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  8. 轻松搞定JSONP跨域请求

    一.同源策略 要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑,当前域不能访问其他域的东西. ...

  9. 使用JSONP跨域请求数据

    下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.

随机推荐

  1. day17-jdbc 7.Statement介绍

    SQL语句:DML.DQL.DCL.DDL.DML和DQL是用的最多的.DCL和DDL用的很少. 程序员一般是操作记录,创建一表很少. package cn.itcast.jdbc; import c ...

  2. ruby 【rails在win7_64位操作系统安装】

    gem update --system --source http://production.s3.rubygems.org 安装截图

  3. 3D模型浏览器的实现思路

    前段时间正好浏览了数据结构中关于图的部分,突然就意识到一个问题,3D模型就是用无向图来存储的.仔细想一想是不是这样呢? 一个3D模型去掉材质之后剩下的部分就是点以及点和点之间的连线了,点我们用三维坐标 ...

  4. HiveServer2的配置使用

    HiveServer2的配置和使用 hive-site.xml配置 hiveserver2的配置 <property> <name>hive.support.concurren ...

  5. oracle获取列的备注和数据类型

    select column_name, data_type, data_precision, data_scale, nvl((select t_s.comments from all_col_com ...

  6. 远程桌面--------ms12-020 漏洞复现 （死亡蓝屏）

    漏洞名:MS12-020(全称:Microsoft windows远程桌面协议RDP远程代码执行漏洞) 介绍:RDP协议是一个多通道的协议,让用户连上提供微软终端机服务的电脑. windows在处理某 ...

  7. winfrom浏览器控件

    (1)webbrowser 在ie的基础上开发出来的,一般情况下很好用,特殊情况下没法用,一堆坑,h5支持效果不好 使用:直接拖控件就好了 (2)WebKit .NET http://webkitdo ...

  8. vs code 提示快捷键

    1.ctrl+space 基本上被输入法快捷键占用 文件->首选项->键盘快捷方式(ctrl+k,ctrl+s):搜索 editor.action.triggerSuggest 换成 ct ...

  9. binder学习笔记（十）—— 穿越到驱动层

    Binder驱动层的代码在kernel/goldfish/drivers/staging/android下的binder.c和binder.h.Android源码是不带Linux内核的,驱动正是在这个 ...

  10. Rabbitmq——实现消费端限流 --NACK重回队列

    如果是高并发下,rabbitmq服务器上收到成千上万条消息,那么当打开消费端时,这些消息必定喷涌而来,导致消费端消费不过来甚至挂掉都有可能. 在非自动确认的模式下,可以采用限流模式,rabbitmq ...