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. ubuntu13.04下安装jdk7

    参考http://www.neversaydie.cc/ubuntu-install-jdk-in-detailed/ 而来 1.手工从Oralce官网下载jdk-7u25-linux-x64.gz  ...

  2. NOI模拟赛Day2

    深深的感受到了自己的水 ---------------------------------------------------------------------------------------- ...

  3. Android控件属性大全(转)

    http://blog.csdn.net/pku_android/article/details/7365685 LinearLayout         线性布局        子元素任意: Tab ...

  4. Red KV数据 庫设計模式

    转:http://blog.nosqlfan.com/html/3033.html NoSQL带给我们的东西很多,高性能,水平扩展性,还有不一样的思维方式.本文来自@hoterran的个人博客运维与开 ...

  5. linux下使用线程锁互斥访问资源

    linux使用线程锁访问互斥资源: 1.线程锁的创建 pthread_mutex_t g_Mutex; 2.完整代码如下 #include <stdio.h> #include <s ...

  6. 浅谈iOS中的userAgent

    浅谈iOS中的userAgent   User-Agent(用户代理)字符串是Web浏览器用于声明自身型号版本并随HTTP请求发送给Web服务器的字符串,在Web服务器上可以获取到该字符串. 在公司产 ...

  7. Lamp下安全配置随笔

    Apache方面: 1.apache有两个指令可以输出服务器的细节,即ServerSignature和ServerTokens. 当这两个指令一起使用时,会输出apache的版本号,php的版本号,i ...

  8. emmet常用的输入

    开始体验:输入以下简写,按tab键 html:5 html:4t html:4s html:xxs ul#nav>li.itemS*4>a{Item $} <ul id=" ...

  9. centos install zookeeper cluster

    1.apache官方下载, 2.新版本需要jdk环境,然后配置好jdk环境 3.解压zookeeper,进入解压后的conf,新建zoo.cfg (删掉自带的cfg)内容如下 tickTime=200 ...

  10. 微信公众号内H5调用微信支付国内服务商模式

    最近在折微信公众号内H5用JSAPI调用微信支付,境内服务商版支付,微信支付给出的官方文档以及SDK不够详细,导至我们走了一些弯路,把他分享出来,我这边主要是用PHP开发,所以未加说的话示例都是PHP ...