由于“同源策略”的限制，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. jQuery整理笔记5----jQuery大事

    一.大事 1.载入中DOM $(document).ready() 这个第一节里具体介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口.用来为每个匹配元素绑定事件处理程序.其基本的 ...

  2. Android项目打包成APK文件

    第一步:右键单击该项目选择Export项目 显演示样例如以下界面:选择Exprot Android Application 第二步:输入项目名称,默认的情况下是原始的项目名称 下一步: 点击 Crea ...

  3. 仿jQuery之链式调用

    链式调用的形式其实就是对象调用一连串的方法.为什么能连续调用这么多的方法?因为调用方法返回调用的对象,于是乎就可以一如既往,一往无前地调用下去.链式调用的原理就是在方法中返回执行上下文this,每次调 ...

  4. Windows Server 2008 网管数据采集 努力做“日拱一卒“

    Windows Server 2008R2系统管理[刘道军主讲MCITP课程] http://edu.51cto.com/course/course_id-510.html Windows Serve ...

  5. 【BZOJ3450】【Tyvj1952】Easy 可能DP

    联系: #include <stdio.h> int main() { puts("转载请注明出处[辗转山河弋流歌 by 空灰冰魂]谢谢"); puts("网 ...

  6. 使用SAX解析XML文件

    SAX这是Simple API for XML缩写,它不是由引起W3C拟议标准正式.尽管如此,使用SAX很少几个,点儿全部的XML解析器都会支持它. 与DOM比較而言,SAX是一种轻量型的方法. 我们 ...

  7. 出现localStorage错误Link解决方案（组态）

    属性-链接-进入-附加依赖-加入sqlite3.lib cocos2d-x-2.2.2\Debug.win32添加的文件夹sqlite3.dll.sqlite3.lib 版权声明:本文博客原创文章.博 ...

  8. 怎样才能充分利用SQL索引

    原文:怎样才能充分利用SQL索引 背景:目前WEB的普及太快,很多网站都会因为大流量的数据而发生服务器习惯性死机,一个查询语句只能适用于一定的网络环境.没有优化的查询当遇上大数据量时就不适用了. 本文 ...

  9. Qt 如何处理拖放应用程序参数时，中国

    你用 Qt 我们开发的应用程序.用户拖放文件到您的 exe 在.启动应用程序,在这个时候, main() 功能参数可以接收中国.如何正确处理它?非常easy,码如下面: QTextCodec *cod ...

  10. 使用Net.Mail、CDO组件、JMail组件三种方式发送邮件

    原文:使用Net.Mail.CDO组件.JMail组件三种方式发送邮件 一.使用Net.Mail 需要服务器认证,大部分服务器端口为25. { MailMessage mailMsg = mailMs ...