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. ACM: CodeForces 140A New Year Table-数学几何

    CodeForces 140A New Year Table Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d ...

  2. BZOJ 1045 题解

    1045: [HAOI2008] 糖果传递 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3502  Solved: 1623[Submit][Sta ...

  3. 修改linux运行级别

    1.Linux下的7个运行级别 0 系统停机模式,系统默认运行级别不能设置为0,否则不能正常启动,机器关闭. 1 单用户模式,root权限,用于系统维护,禁止远程登陆,就像Windows下的安全模式登 ...

  4. HttpWebRequest Post callback

    public void GetValueFromRequest(string postData) { var request = (HttpWebRequest) WebRequest.CreateH ...

  5. Update UI from an asynchronous thread

    One of the most common tasks you need to perform in a Windows Phone application is updating the UI f ...

  6. js打印功能

    1.window.print方式: jsp页面 打印按钮:       <input type="button" value="打印" onclick=& ...

  7. odoo报表条码无法显示解决[转]

    当服务器为Linux(Ubuntu)时,ODOO打印的报表上是有条码的,却显示空白框框.问题在于服务器上没有安装条码的字体,reportlab渲染条码图形失败,导致显示不正常. 将附件中的字体下载,解 ...

  8. 用一段JS代码来比较各浏览器的极限内存与运算速度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 配置DNS实验一例

    1安装bind软件 2查看当前DNS服务 3修改配置文件 4测试

  10. 求最大连续bit数

    描述 功能: 求一个byte数字对应的二进制数字中1的最大连续数,例如3的二进制为00000011,最大连续2个1    输入: 一个byte型的数字    输出: 无     返回: 对应的二进制数 ...