由于“同源策略”的限制，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. 微信QQ的二维码登录原理浅析

    在非常多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了),二维码验证,多终端辅助授权应用開始多起来,这里先说下啥是二维码,事实上二维码就是存了二进制数据的 ...

  2. （两）unity4.6Ugui中国教程文档-------总结-UGUI Canvas

    大家好,我是广东太阳.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitym ...

  3. Redux基础

    Redux 是一个状态容器 Redux 就像是作者自己的介绍,它不会为你提供任何的东西,它不会告诉你如何做路由,它只专注于应用程序状态,是一个 JavasSript 的状态容器,所有的状态的变化都是当 ...

  4. C++内存分配和拷贝构造函数写研究

    昨晚参加笔试,开错题,有印象中的概念,但目前尚不清楚是怎么回事,什么原理,导致错误的话题.现在总结. 一.C++写内存分配研究 问题考察例如以下,请先不要看答案,看看你是否能做对,呵呵: waterm ...

  5. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(21)-用户角色权限基本的实现说明

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(21)-用户角色权限基本的实现说明     ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框 ...

  6. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(3)-面向接口的编程

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(3)-面向接口的编程 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)  (1)框架搭建    (2):数据 ...

  7. XSS学习笔记（五）-XSS防御

    如果只生产XSS的地方都与输入或输出相关联的.所以错过了主要矛盾.而且,我们将有一个解决问题的办法:您可以输入端砚格过滤,是可能的过滤输出时间,输出到用户的GET或POST中是否有敏感字符: 输入过滤 ...

  8. hdu-4419-Colourful Rectangle-段树区，并寻求

    这个问题很有趣的项目,写麻烦.它预计将有写了很长的时间. 好在,我想开了一个比较简单的方法.. . 使用位计算,颜色RGB分别1,2,4,代表. 状态的长度了. #include<stdio.h ...

  9. jquery插件之DataTables 参数介绍

    DataTables(http://www.datatables.net/)应该是我到目前为止见过的,功能最强大的表格解决方案(当然,不计算其它整套框架中的table控件在内). 先把它主页上写的特性 ...

  10. node.js的npm安装

    我不打算引进node.js的npm安装,但发现node.js通过管理一些包npm实现,或给一个简短的npm. 1.npm什么        npm是一个node包管理和分发工具,已经成为了非官方的公布 ...