JSONP

　　JSONP是实现跨域GET请求的一种方法， 原理上利用script标签可以动态加载JS文件，

将不同源站点的JSON数据加载到本网站来，如果给定回调函数，将回调函数名传递到服务器端，

在服务器端生成 此函数以JSON数据为入参的调用语句，就为一般AJAX实现的getJSON接口。

getJSON接口如果请求URL与当前URL一致，则为一般网站访问。

下文给出详尽的解释

http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

实验

jsonpServer.php

<?php

$jsondata = "{symbol:'IBM', price:120}";

echo $_GET['callback'].'('.$jsondata.')';

?>

jsonpClient.html

<html>

<head>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <style>

        </style>

</head>

<body>

        <h1>hello world!</h1>

         <input type="text" value="test"/>

         <input type="button" value="button"/>

         <script type='text/javascript'>

            $("[type='button']").click(function(){

                //JQuery JSONP Support

                var url = "http://127.0.0.1/jsonpServer.php?callback=?";

                $.getJSON(url, function(data){

                    var retMsg = "Symbol:" + data.symbol + ", Price:" + data.price;

                    $("[type='text']").val(retMsg);

                });

            })

        </script>

</body>

</html>

客户端用户访问 http://localhost/jsonpClient.html,

点击按钮，发起JSONP请求，

GET http://127.0.0.1/jsonpServer.php?callback=jQuery18305268568145111203_1403193771906&_=1403194058203 HTTP/1.1
Host: 127.0.0.1
Connection: keep-alive
Accept: */*
User-Agent: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36
Referer: http://localhost/jsonpClient.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en-GB;q=0.6,en;q=0.4

服务器端响应内容为，可见$.getJSON检测URL中有callback=？， 表示将第二个参数作为回调函数，

但是第二个函数为 匿名函数， 所以就给此函数重命名一个复杂长串， 以备响应时候触发调用。

HTTP/1.1 200 OK
Date: Thu, 19 Jun 2014 16:07:38 GMT
Server: Apache/2.4.7 (Win32) OpenSSL/0.9.8y PHP/5.4.25
X-Powered-By: PHP/5.4.25
Content-Length: 67
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html

jQuery18305268568145111203_1403193771906({symbol:'IBM', price:120})

用途：

1、 跨域数据获取，例如获取天气预报等数据。

2、 跨域提交（GET方式），提交简单地数据。

JSONP使用笔记的更多相关文章

  1. JSONP学习笔记

    1. 实现跨域请求的三种方法 本地代理.Flash.Script标签(img,iframe,link也可以,具有src属性) 2. JSONP全称:JSON With Padding(使用内嵌的方式把 ...

  2. django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

    一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...

  3. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  4. Angularjs学习笔记9_JSON和JSONP

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决.最被推崇或者说首选的 ...

  5. js便签笔记（13）——jsonp其实很简单【ajax跨域请求】

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  6. javascript笔记——jsonp

    上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个服务器下的页面是无法获取到该 ...

  7. jsonp跨域请求学习笔记

    前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.( ...

  8. js便签笔记（13）——jsonp事实上非常easy【ajax跨域请求】

    前两天被问到ajax跨域怎样解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了很多资料,原来如此.. . 为何一直知道jsonp,但一直迷迷糊糊的不明 ...

  9. AJAX学习笔记2：XHR实现跨域资源共享（CORS）以及和JSONP的对比----转载

    1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...

随机推荐

  1. 利用百度云盘API上传文件至百度云盘

    一.获取Access Token示例 1. 请您将以下HTTP请求直接粘贴到浏览器地址栏内,并按下回车键. https://openapi.baidu.com/oauth/2.0/authorize? ...

  2. CentOS6.4 安装MongoDB

    1.下载MongoDB(64位) http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz 或 http://pan.baidu.c ...

  3. Jquery-UI实现弹出框样式

    需要引用 <link href="CSS/jquery-ui.custom.min.css" rel="stylesheet" /> <scr ...

  4. nodeJS中exports和mopdule.exports的区别

    每一个node.js执行文件,都自动创建一个module对象,同时,module对象会创建一个叫exports的属性,初始化的值是 {} module.exports = {}; Node.js为了方 ...

  5. BZOJ2322: [BeiJing2011]梦想封印

    Description 渐渐地,Magic Land上的人们对那座岛屿上的各种现象有了深入的了解. 为了分析一种奇特的称为梦想封印(Fantasy Seal)的特技,需要引入如下的概念: 每一位魔法的 ...

  6. uboot中添加FIQ中断及相关问题

    本文主要说明了在uboot中添加FIQ中断时遇到的问题以及对应的解决办法. 首先交代一下项目的软硬件环境.硬件方面,使用s3c2440作为主控芯片,外接串口.网卡等设备.软件方面,主控芯片上电后运行u ...

  7. Enumerators and Enumerable

    Next week task is to learn how generic enumeration interface works, try to build a sample and write ...

  8. 接口（Java）

    什么是接口:接口就是一些方法特征的集合,接口是对抽象的抽象. 在java语言中,接口有两种意思: ①概念性的接口,即系统对外提供的所有服务 ②指用interface关键字定义的接口,也称为接口类型 特 ...

  9. POI-HSSF and POI-XSSF - Java API To Access Microsoft Excel Format Files

    一.概述 HSSF和XSSF是apache开源项目POI中实现java面向Excel的两个接口.两者的区别在于,HSSF适用于Excel '97(-2007)文档,而XSSF适用于Excel 2007 ...

  10. mztree使用示例

    mztree使用:http://www.myexception.cn/open-source/1014169.html jquery的treeview使用:http://www.cnblogs.com ...