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. 洛谷 P1012 拼数 Label：续命模拟QAQ

    题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,312,343联接成的最大整数为:34331213 又如:n=4时,4个整数7,13,4 ...

  2. JS中关于比较运算符的问题（a===b）

    之前也会碰到a===b和a==b的表达式,但都没有仔细的看资料,今天看canvas有关的书中提到了,就mark一下: a == b    说明:a与b相等: a ===b  说明:a与b相同,并且类型 ...

  3. 【CodeVS】p1079 回家

    题目描述 Description 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数据中,总会有且只有一 ...

  4. 《你必须知道的.NET》书中对OCP（开放封闭）原则的阐述

    开放封闭原则(OCP,Open Closed Principle)是面向对象原则的核心.由于软件设计本身所追求的墓边就是封装变化,降低耦合,而开放封闭原则就是对这一目标的直接体现.(你必须知道的.NE ...

  5. js动态创建的元素绑定事件

    新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("can ...

  6. PHP Pthread多线程 操作

    <?php class vote extends Thread { public $res = ''; public $url = array(); public $name = ''; pub ...

  7. 实现AJAX的基本步骤 。。转

    要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法. ...

  8. IE hack中主要的几个

    _: IE6; #*+.: IE6 IE7; black\0: IE8; black\9: IE所有; @media screen\9 { … }: IE6 IE7; @media \0screen\ ...

  9. 如何在maven工程中加载oracle驱动

    maven中引入oracle驱动报错Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0 时间:2015年09月22日  浏览:9361次 在maven ...

  10. js去除中间空格

    / 功能: 1)去除字符串前后所有空格 // 2)去除字符串中所有空格(包括中间空格,需要设置第2个参数为:g) function Trim(str,is_global) { var result;  ...