由于“同源策略”的限制，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. 在win8.1 64位系统+cocos2d-x2.2.3下搭建android交叉编译环境

    搭建前须要下载的软件包(默认已搭建好cocos2d-x而且可在VS上执行,本人VS版本号为2013): 1:java 下载地址:http://www.java.com/zh_CN/download/m ...

  2. Websocket实例

    C#版Websocket实例 websocket有java.nodejs.python,Php等等版本,我使用的是C#版本,服务器端是Fleck,github地址:https://github.com ...

  3. iOS 8中CLLocationManager及MKMapView showUserLocation失败的解决的方法

    用XCode 6编译的原来XCode 5.1.1写的程序时,发现原来写的CLLocationManager定位的代码以及MKmapView的showUserLocation失效.查了一下,XCode ...

  4. 贪心算法(Greedy Algorithm)最小生成树 克鲁斯卡尔算法(Kruskal&#39;s algorithm)

    克鲁斯卡尔算法(Kruskal's algorithm)它既是古典最低的一个简单的了解生成树算法. 这充分反映了这一点贪心算法的精髓.该方法可以通常的图被表示.图选择这里借用Wikipedia在.非常 ...

  5. ural 1932 The Secret of Identifier 容斥

    主题链接:点击打开链接 stl+容斥 #include <cstdio> #include <cstring> #include <algorithm> #incl ...

  6. bigdata_一篇文看懂Hadoop

    本文转载:暂未找到原出处,如需署名 请联系 我们很荣幸能够见证Hadoop十年从无到有,再到称王.感动于技术的日新月异时,希望通过这篇内容深入解读Hadoop的昨天.今天和明天,憧憬下一个十年. 本文 ...

  7. jquery 元素控制(附加元素/其他内容)引进和应用

    一个.在内部元素/外部附加元件 append,prepend:加入到该子元素  before,after:元素加入 html: <div id="content"> 在 ...

  8. crawler_java_数据平台结构

    大数据生态架构

  9. SpringMVC一路总结（

    SpringMVC一路总结(三) 在博文<SpringMVC一路总结(一)>和<SpringMVC一路总结(二)>中,该框架的应用案例都是是基于xml的形式实现的.然而,对于大 ...

  10. 前端学习笔记(zepto或jquery)——对li标签的相关操作（三）

    对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...