如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。

使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。

服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。

如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

注意，JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。

如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。

这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

JSONP的实现思路

  1. 前端创建script标记，设置src，添加到head中（你可以往body中添加）
  2. 后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据
  3. 回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/jquery.min.js"></script>

    <script>

        function SaveData() {

            var UserName = "星辰雾海";

            $.ajax({

                type: "post",

                url: "http://116.228.89.136:8032/test.aspx",

                dataType: "jsonp",

                //这两句指定回调函数为：CallBackUser

                jsonp: 'callback',

                jsonpCallback: 'CallBackUser',

                data: { UserName: UserName },

                success: function (data) {

                    //jsonp请求，不会执行此函数，只执行CallBackUser

                    alert(data.UserName);

                }

            });

        }

        function CallBackUser(jsonData) {

            alert(jsonData.UserName);

        }

    </script>

</head>

<body>

    <input type="button" id="btnAdd" value="Test" onclick="SaveData()" />

</body>

</html>

请求Url：

http://116.228.89.136:8032/test.aspx?callback=CallBackUser&UserName=%E6%98%9F%E8%BE%B0%E9%9B%BE%E6%B5%B7&_=1457492166376

这个地址是自动拼接而成，注意中间拼接的 jsonp 参数的值，是你本地页面中的函数名称，在data属性中设置。

服务端代码：

protected void Page_Load(object sender, EventArgs e)

        {

            //http://116.228.89.136:8032/test.aspx?callback=jQuery11130304913979023695_1457491748431&jsonp=CallBackUser&UserName=%E6%98%9F%E8%BE%B0%E9%9B%BE%E6%B5%B7&_=1457491748433

            string json = "{UserName:\"My nam is "+Request["UserName"]+"!\"}";

            string callback = Request["callback"];

            Response.Write(callback + "(" + json + ")");

            Response.End();

        }

输出脚本，自动执行。

附：跨域请求的方式有很多种，

  1. iframe
  2. document.domain
  3. window.name
  4. script
  5. XDomainRequest (IE8+)
  6. XMLHTTPRequest (Firefox3.5+)
  7. postMessage (HTML5)
  8. 后台代理
  9. ServiceStack
  10. 等等...

参考：http://www.cnblogs.com/know/archive/2011/10/09/2204005.html

使用jsonp跨域发送请求的更多相关文章

  1. php跨域发送请求原理以及同步异步问题

    <script async type="text/javascript" src="http://lisi.com/data.php?flag=1"> ...

  2. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  3. jsonp 跨域请求

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

  4. jsonp 跨域原理详解

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  5. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

  6. 【转】JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  7. JSONP跨域的原理解析（转）

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

  8. JSONP跨域的原理

    一种脚本注入行为 在 2011年10月27日 那天写的     已经有 12671 次阅读了 感谢 参考或原文   服务器君一共花费了23.005 ms进行了2次数据库查询,努力地为您提供了这个页面. ...

  9. JSONP跨域的原理解析及其实现介绍

    JSONP跨域的原理解析及其实现介绍 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-22 JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并 ...

随机推荐

  1. Executor框架（七）Future 接口、FutureTask类

    Future接口介绍   Future 表示异步计算的结果.它提供了检查计算是否完成的方法,以等待计算的完成,并获取计算的结果.   Future 一般由 ExecutorService 的submi ...

  2. VS2015+Python3.5的配置

    之前就学过一点Python,不用就忘记了,现在旧事从提~~ 学Python肯定得有一个良好的调试环境,比较熟悉VS,所以就配置了这个语言和工具! 安装过程出现的问题及解决方案 问题一: VS2015更 ...

  3. 手机app/h5页面http请求抓包调试

    1.抓包机器跟客户端手机连上同一wifi热点,最好是第三者提供的移动wifi,公司内网wifi网络访问有限制. 2.设置手机客户端http代理 三者关系图示:

  4. 使用seaborn制图（柱状图）

    import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns # 设置风格, ...

  5. UI5-文档-4.37-Content Density

    在本演练教程的这一步中,我们将根据用户的设备调整内容密度.SAPUI5包含不同的内容密度,允许您为支持触摸的设备显示更大的控件,为鼠标操作的设备显示更小.更紧凑的设计.在我们的app中,我们将检测设备 ...

  6. iPhone launch screen，self.view.frame.size

    在工程文件中找到以下设置 "Launch Screen File"只支持iOS8以上版本,如果用之,则self.view.frame.size返回的结果为正常的当前view尺寸. ...

  7. caffe openpose/Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields配置（转）

    Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields 是CVPR2017的一篇论文,作者称是世界上第一个基于深度学习的 ...

  8. 深入理解const char*p,char const*p,char *const p,const char **p,char const**p,char *const*p,char**const p

    由于没有const*运算,const实际上修饰的是前面的char*,但不能在定义时转换写成 const(char *)*p,因为在定义是"()"是表示函数. 三.深入理解7种组合 ...

  9. delphi XE3解析JSON数据

    测试数据如下: Memo1.text中的数据: { "date":"周二(今天, 实时:12℃)", "dayPictureUrl":&qu ...

  10. spring 整合 struts2 xml配置

    整合之前要搞清楚struts2是什么; struts2:表现层框架  增删改查  作用域  页面跳转   异常处理  ajax 上传下载  excel   调用service spring :IOC/ ...