由于“同源策略”的限制，ajax不能做跨域请求，jsonp是当下解决跨域请求最流行的方案，来个例子(index.html)：

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Document</title>

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

</head>

<body>

<input type="button" value="submit" id="submit">

<div id="txt"></div>

<script>

//监听对象

// document.getElementById('submit').onclick = function(){

// }

//简单的jsonpCallback封装

function jsonpCallback(data){//回调函数

  console.log(data);

}

var jsonp = document.createElement("script");//动态添加脚本

jsonp.type = "text/javascript";

jsonp.src="json.php?callback=jsonpCallback";

document.getElementsByTagName("head")[0].appendChild(jsonp);

</script>

</body>

</html>

json.php页面：

<?php

$info = array("name"=>"复读机2","age"=>223);

$infoencode = json_encode($info);

$callback = $_GET["callback"];

echo $callback."(".$infoencode.")";//返回带有json格式数据的字符串

?>

说明一下：

发出请求的页面的执行过程：

　　动态添加script标签，当添加完成之后，立即向json.php页面做出请求，这个请求是get请求，并携带callback=jsonpCallback查询字符串。

被请求的页面的执行过程：

　　1将关联数组通过json_encode函数转化为json数据{"name":"复读机","age":23}并赋值给$infoencode变量

　　2通过$_GET函数获取callback的值jsonpCallback

　　3返回jsonpCallback({"name":"\u590d\u8bfb\u673a2","age":223})（这个值是通过utf-8编码的）

发送请求页面的执行过程：

　　收到一个执行函数，并且执行jsonpCallback函数，完成数据传输！

注意的地方是：1由于jsonp的原理，同域也可以接收到数据；2不同子域名之间也属于跨域，不能通过ajax直接请求

jsonp总结的更多相关文章

  1. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

  2. angular2系列教程（九）Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  3. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  4. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  5. 跨域的jsonP

    1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问.   2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式   3.jsonp的get与p ...

  6. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

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

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

  8. 跨域之jsonp

    我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...

  9. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  10. JSONP的诞生、原理及应用实例

    问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...

随机推荐

  1. 关于在同一母版页中使用多个CSS文件的解决方案

    原文:关于在同一母版页中使用多个CSS文件的解决方案 以前都用.NET1.1没遇到这问题,现在换了2.0开始学着使用母版,结果就遇到了这个问题,在百度上一搜索才发现有不少人提出这个问题,但没找到好的解 ...

  2. 面向对象三大特征之多态——Java笔记（七）

    多态:     同一个实体同时具有多种形式     编译时的类型有声明该变量时使用的类型决定,运行时的类型有实际赋值给变量的对象决定     如果编译时类型和运行时类型不同,就出现多态 例: clas ...

  3. ChartType属性

    xl3DArea:三维面积图 xl3DAreaStacked:三维堆积面积图 xl3DAreaStacked100:三维堆积面积图 xl3DBarClustered:三维簇状条形图 xl3DBarSt ...

  4. [译文]c# /.Net 技巧: ToDictionary() and ToList()

    前言: 有两个简单好用的LINQ扩展方法 ToDictionary() 和ToList(),你可能知道或不知道,但是它的的确确可以简化查询转化为集合的任务: 简介: LINQ和延迟执行 据你所认识的L ...

  5. Matlab学习第二天 利用插值

    插入值一切手段: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDQ5MjI1Nw==/font/5a6L5L2T/fontsize/400/fi ...

  6. 电商指尖---(9).net发展Solr中间Facet特征

    上一节中我们演示了在SolrAdmin中使用Facet功能来进行分组统计.这一节我们看看如何使用.NET开发Solr中的Facet功能.在讲Facet功能的同一时候, 我们看下.Net中如何使用Sol ...

  7. Webbrowser控件史上最强技巧全集

    原文:Webbrowser控件史上最强技巧全集 Webbrowser控件史上最强技巧全集 VB调用webbrowser技巧集 1.获得浏览器信息: Private Sub Command1_Click ...

  8. .Net2.0 --Winform结合WebBrowser控件和Socket老技术来实现另类Push~

    原文:.Net2.0 --Winform结合WebBrowser控件和Socket老技术来实现另类Push~ 目前的企业级开发比较流行的是Web2.0技术,但是由于Web技术基于请求--响应的交互模式 ...

  9. [Unity3D]Unity3D游戏开发Android内嵌视图Unity查看

    ---------------------------------------------------------------------------------------------------- ...

  10. 兔子--gradle安装和配置

    1.下载gradle,下载--all的这个 点击进入下载页 2.下载下来后,解压.配置环境变量. 编辑path , ....;G:\soft\gradle-2.2.1-all\gradle-2.2.1 ...