JSONP使用笔记

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})

JSONP使用笔记

时间: 2024-11-06 17:32:20

JSONP使用笔记的相关文章

Jsonp 复习笔记

Jsonp: json padding 1.js中调用非同源的资源会被浏览器阻止掉: 2.非同源是指IP或者端口不同的资源URL 3.js中script标签中指定url熟悉,这种方式浏览器将不会存在非同源的限制. 4.script标签不受浏览器同源限制正是jsonp实现的基础. 总结: 1.客户端需要增加script和增加回调方法 2.服务端需要返回这个回调方法和方法参数 3.可以使用jquery的:$.ajax来实现. $.ajax({ url: 'http://otherdomain/xxx

笔记-Ajax[4]-JSONP跨域获取数据。

JS的跨域:跨域名获取数据,a域名获取b域名中的数据. 解决跨域获取数据的方法也叫JSONP(JSON and Padding) JSONP方法: 1:服务器代理:XMLHttpRequest代理文件 2:script标签:jsonp(常用);//利用script标签的src引入外部文件的功能,src能够引入任何的文件的类型 3:location.hash方式:iframe 4:window.name方式 5:flash方式 6:html5的postMessage方式 例子:百度输入数据下拉框提

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req

Angularjs学习笔记9_JSON和JSONP

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决.最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域.JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议. JSON的格式: JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做. 1.JSON只有两种数据类型描述符,大括号{}和方括号[],

js便签笔记(13)——jsonp事实上非常easy【ajax跨域请求】

前两天被问到ajax跨域怎样解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了很多资料,原来如此.. . 为何一直知道jsonp,但一直迷迷糊糊的不明确呢?--网上那些介绍资料都写的太复杂了! 我是能多简单就多简单,争取让你十分钟看完! 1. 同源策略 ajax之所以须要"跨域".罪魁祸首就是浏览器的同源策略.即,一个页面的ajax仅仅能获取这个页面同样源或者同样域的数据. 怎样叫"同源"或者"同域&quo

【前端学习笔记】原生Javascript中通过JSONP(前端常用方法)进行跨域

Ajax跨域-------------------------- 跨域: 跨域名 一个域名下的文件去请求了和他不一样的域名下的资源文件,那么就会产生跨域请求 这是ajax的跨域限制问题 跨域的解决 : jsonp: json width padding 核心: 1.script标签 2.用script标签加载资源是没有跨域问题的 3.script只认文件的实际内容,而不是后缀.只要内容是合法的js就能用 流程: 1.在资源加载进来之前定义好一个函数,这个函数接受一个参数(要取的数据) ,而将要加

AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比

1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介绍JSONP这种仅能支持GET请求的跨域方式和CORS作对比:最后,阐述CORS的XHR解决方式和IE中的XDR解决方式,在此基础上提供了工具函数进行跨浏览器的HTTP请求对象创建. 2 跨域问题的源头-同源策略 在客户端编程语言中,如javascript和 ActionScript,同源策略是一个

Jsonp的学习笔记

最近学习了jsonp,在这里总结一下 1.什么是同源策略?跨域? 首先,jsonp是为了解决跨域而产生的一种手段.跨域是因为浏览器都满足与一种同源策略. 何谓同源:        URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.      同源策略:        浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性        从一个域上加载的脚本不允许访问另外一个

AngularJS里面$emit, $broadcast,$on,$http.Jsonp,constant是使用笔记

本片主要介绍$emit, $broadcast,$on经常开发的用法! 这张图差不多表明了$emit, $broadcast在aj里面的机制和用场! 这篇文章介绍了aj里面使用jsonp的原理和注意的地方! 下面直接显示下我运行起来的界面! 然后贴上DOM和js代码,本篇不多说,分享一些常用的东西! DOM+js  代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U