编程 Javascript

jsonp原理及使用

Posted in Javascript onOctober 28, 2013

初识jsonp
jsonp 全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案。很多时候我们需要在客户端获取服务器数据进行操作，一般我们会使用ajax+webservice做此事，但是如果我们希望获取的数据和当前页面并不是一个域，著名的同源策略（不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源）会因为安全原因决绝请求，也就是我们不能向其它域直接发送请求以获取资源。
在localhot域上有一个books.php，里面包含脚本对test.com域的books.php发送get请求，希望获取其book列表资源，这就是一个跨域请求资源

$.ajax({
            type:'get',
            url:'http://test.com/books.php'
        });

页面会报一个这样的错误：XMLHttpRequest cannot load http://test.com/books.php. Origin http://localhost is not allowed by Access-Control-Allow-Origin.jsonp是为了解决这个问题出现的。

jsonp原理
虽然有同源策略的限制，但是并不是HTML上所有资源都必须是同一个域的，我们常见的页面为了节省流量或加载速度采用Google或微软的 jQuery CDN，在页面上我们可以这样写就可以引用jQuery了

<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

iframe、img、style、script等元素的src属性可以直接向不同域请求资源，jsonp正式利用script标签跨域请求资源的

简单实现
localhost的books.php希望获得域test.com的books列表，在域test.com内book列表存储在books.xml中
test.com/books.xml

<?xml version="1.0"?>
<books>
    <book name="JavaScript: The Defiitive Guide" publisher="O'Reilly Media, Inc.">
        <author>David Flanagan</author>
    </book>
    <book name="PHP anf MySQL Web Development" publisher="Perason Education">
        <author>Luke Welling</author>
        <author>Laura Thomson</author>
    </book>
    <book name="HTTP: The Defiitive Guide" publisher="O'Reilly Media, Inc.">
        <author>David Courley</author>
        <author>Brian Totty</author>
    </book>
</books>

明显JavaScript不能直接获取books.xml，在test.com中需要有一个机制将xml转化为json（这也就是为什么叫jsonp，其实和ajax一样，返回的数据不一定是json格式，只是json很好用），并动态拼接一条javascript调用语句返回，这个例子中直接使用php页面拼接
test.com/bookservice.php

<?php
    $path=$_SERVER["DOCUMENT_ROOT"].'/books.xml';
    $json=json_encode(simplexml_load_file($path));
    $callbackFn=$_GET['callback'];
    echo "$callbackFn($json);";
?>

这样首先把xml文件内容转换成一个json对象

{"book":[
{"@attributes":{"name":"JavaScript: The Defiitive Guide","publisher":"O'Reilly Media, Inc."},"author":"David Flanagan"},
{"@attributes":{"name":"PHP anf MySQL Web Development","publisher":"Perason Education"},"author":["Luke Welling","Laura Thomson"]},
{"@attributes":{"name":"HTTP: The Defiitive Guide","publisher":"O'Reilly Media, Inc."},"author":["David Courley","Brian Totty"]}
]}

然后拼接为一条javascript语句交给localhost去处理，当然test.com并不知道应该拼接的方法名叫什么，需要localhost在发送请求的时候在url中传入一个叫callback（这个也随便，两边同步就行）的参数指明。看看localhost怎么发送请求吧
localhost/books.php

<!DOCTYPE html>
<html>
<head>
    <title>Books</title>
    <?php include('/components/headerinclude.php');?></head>
    <style type="text/css">
        .book-title
        {
            font-size: 15px;
            font-weight:bold;
            margin-top:6px;
        }
        .book-info
        {
            color:#ccc;
            font-style:italic;
            border-bottom:dashed 1px #ccc;
        }
    </style>
</head>
<body>
    <div style="margin:20px;">
        <div style="font-size:16px;font-weight:bold;">Books</div>
        <div id="books">
        </div>
    </div>
</body>
</html>

我们希望在id为books的div中展示所有book，先添加一个用以显示book的javascript函数，也就是获取到数据后的回调函数，结合上面拼接的json格式可以这么写

function displayBooks(books){
            var books=books.book;
            var booksContainer=document.getElementById('books');
            for(var i=0;i<books.length;i++){
                var tmp=Array();
                tmp.push('<div class="book-title">'+books[i]['@attributes'].name+'</div>');
                tmp.push('<div class="book-info">');
                tmp.push('<div>Publisher: '+books[i]['@attributes'].publisher+'</div>');
                tmp.push('<div>Author(s): ');
                if(typeof books[i].author=='string'){
                    tmp.push(books[i].author);
                }else{
                    var authors=books[i].author;
                    for(var j=0;j<authors.length;j++){
                        tmp.push(authors[j]+' ');
                    }
                }
                tmp.push('</div>'); //end of author
                tmp.push('</div>'); //end of book info
                booksContainer.innerHTML+=tmp.join('');
            }
        }

然后是关键的jsonp请求的方法了

function getBooks(){
            var script=document.createElement('script');
            script.setAttribute('type','text/javascript');
            script.setAttribute('src','http://test.com/bookservice.php?callback=displayBooks');
            document.body.appendChild(script);
        }
        getBooks();

在getbooks()方法中动态创建了一个script标签，设置其src为test.com提供的获取数据的service接口并传入回调函数，这样我们可以看看页面的反应，在Chrome控制台下可以看到这条请求
jsonp原理及使用

我们就可以在localhost下获取test.com的books了
jsonp原理及使用

jquery实现
在jquery中也有对jsonp的封装，不过jquery把其放到了ajax中，不明白为什么，毕竟这东西和ajax不太一样。写一个jQuery版的

function getBooks(){
            $.ajax({
                type:'get',
                url:'http://test.com/bookservice.php',
                dataType:'jsonp',
                jsonp:'callback',
                jsonpCallback:'displayBooks'
            });
        }

看起来完全一样，不过方便了很多，不用自己创建script标签神马的了，指明dataType为jsonp，回调函数不放在url内了，而是使用两个参数分别指明。

安全性问题
当然使用jsonp会在一定程度上造成安全性问题，如果请求的站点不是新人站点，那么可能会在返回的方法调用中包含一些恶意代码。所以尽量向信任的站点发送请求。另外xss也经常会利用jsonp向站点注入恶意代码。

jsonp原理及使用

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Code：loadScript( )加载js的功能函数

Feb 02 Javascript

javascript实现unicode和字符的互相转换

Jul 18 Javascript

Jquery多选下拉列表插件jquery multiselect功能介绍及使用

May 24 Javascript

javascript自然分类法算法实现代码

Oct 11 Javascript

一款由jquery实现的整屏切换特效

Sep 15 Javascript

JavaScript跨浏览器获取页面中相同class节点的方法

Mar 03 Javascript

js闭包实现按秒计数

Apr 23 Javascript

jQuery表格插件datatables用法汇总

Mar 29 Javascript

基于Vue的移动端图片裁剪组件功能

Nov 28 Javascript

使用Angular CLI生成路由的方法

Mar 24 Javascript

JavaScript实现多个物体同时运动

Mar 12 Javascript

js实现无刷新监听URL的变化示例代码详解

Jun 03 Javascript

JS实现一键回顶功能示例代码

Oct 28 #Javascript

简单的js表单验证函数

Oct 28 #Javascript

自己写的Javascript计算时间差函数

Oct 28 #Javascript

Textarea根据内容自适应高度

Oct 28 #Javascript

将json当数据库一样操作的javascript lib

Oct 28 #Javascript

一个JavaScript变量声明的知识点

Oct 28 #Javascript

Javascript实现页面跳转的几种方式分享

Oct 26 #Javascript

You might like

PHPnow安装服务[apache_pn]失败的问题的解决方法

2010/09/10 PHP

php5 apache 2.2 webservice 创建与配置(java)

2011/01/27 PHP

php+ajax做仿百度搜索下拉自动提示框(有实例)

2012/08/21 PHP

PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例

2019/05/30 PHP

php pdo连接数据库操作示例

2019/11/18 PHP

解析arp病毒背后利用的Javascript技术附解密方法

2007/08/06 Javascript

[推荐]javascript 面向对象技术基础教程

2009/03/03 Javascript

javascript 事件处理程序介绍

2012/06/27 Javascript

js操作label给label赋值及取label的值示例

2013/11/07 Javascript

JavaScript实现简单的时钟实例代码

2013/11/23 Javascript

JavaScript函数详解

2015/02/27 Javascript

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

2015/05/13 Javascript

JavaScript中判断两个字符串是否相等的方法

2015/07/07 Javascript

基于jquery实现即时检查格式是否正确的表单

2016/05/06 Javascript

单击按钮发送验证码,出现倒计时的简单实例

2017/03/17 Javascript

原生js封装自定义滚动条

2017/03/24 Javascript

Angular 作用域scope的具体使用

2017/12/11 Javascript

原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

2018/05/03 Javascript

JavaScript生成指定范围随机数和随机序列的方法

2018/05/05 Javascript

Angular2之二级路由详解

2018/08/31 Javascript

如何理解python面向对象编程

2020/06/01 Python

Python基于Twilio及腾讯云实现国际国内短信接口

2020/06/18 Python

详解python爬取弹幕与数据分析

2020/11/14 Python

广告宣传策划方案

2014/05/21 职场文书

好人好事演讲稿

2014/09/01 职场文书

高中生逃课检讨书

2014/10/10 职场文书

教师批评与自我批评材料

2014/10/16 职场文书

英文版辞职信

2015/02/28 职场文书

食品质检员岗位职责

2015/04/08 职场文书

2015年医院后勤工作总结

2015/05/20 职场文书

三好学生主要事迹怎么写

2015/11/03 职场文书

大学生军训心得体会5篇

2019/08/15 职场文书

详解Java实践之适配器模式

2021/06/18 Java/Android

python中Matplotlib绘制直线的实例代码

2021/07/04 Python

Matplotlib绘制条形图的方法你知道吗

2022/03/21 Python

Python下载商品数据并连接数据库且保存数据

2022/03/31 Python