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. 洛谷 P1198 [JSOI2008]最大数 Label:线段树

    题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:L不超过当前数列的长度. 2. 插入操作 ...

  2. [知识点]Tarjan算法

    // 此博文为迁移而来,写于2015年4月14日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vxnx.html UPD ...

  3. 【wikioi】2822 爱在心中

    题目链接 算法:Tarjan+dfs(最短路的都行,判连通而已) 先了解一下什么是Tarjan Tarjan算法用于求出图中所有的强连通分量. 转自NOCOW:点击打开链接 ============= ...

  4. NOI模拟赛Day4

    看到成绩的时候我的内心** woc第一题写错了呵呵呵呵呵呵呵呵 人不能太浪,会遭报应的** ------------------------------------------------------ ...

  5. 抄书 Copying Books UVa 714

    Copying  Books 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=85904#problem/B 题目: Descri ...

  6. hdu1251 字典树or map

    一道字典树的题,不过看起来用map更为简单 传送门 题意: 给出一堆字符串构成一个字典,求字典里以某字符串为前缀的字符串有几个 思路: 输入字符串时把字符串的前缀全部存进map并标记次数 查询时直接输 ...

  7. TLV简介

    引子: 前段时间在项目中第一次接触TLV,项目中用这种格式来传输图片,语音等. 关于TLV TLV是一种可变的格式,意为:Type类型, Lenght长度,Value值.Type:该字段是关于标签和编 ...

  8. [CareerCup] 16.1 Thread and Process 线程和进程

    16.1 What's the difference between a thread and a process? 进程Process是程序执行时的一个实例.一个进程是被分配系统资源的独立单元,每个 ...

  9. 给ListView视图添加行号

    最后的效果如下: 更新,集成一个独立的模块而不改变源文件的方式更为稳妥. 购买地址:https://item.taobao.com/item.htm?spm=a1z10.3-c.w4002-26531 ...

  10. 获取客户端真实ip

    // 获取客户端真实ip() protected function getIP() { global $ip; if (getenv("HTTP_CLIENT_IP")) $ip ...