关闭

JSONP操作01_本地访问数据和跨域访问数据

标签: jsonp访问数据jsonp与ajax区别jsonp跨域访问
456人阅读 评论(0) 收藏 举报
分类:

1jsonp简介

json 是一种数据格式

jsonp 是一种数据调用的方式。

1)什么是jsonp

为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequestActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

2)与ajax的区别

1ajaxjsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jqueryext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajaxjsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

3、所以说,其实ajaxjsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,尽管jquery等把jsonp封装进了ajax,也不能改变这一点。

2.非跨域访问数据举例

jsonp访问本地php文件,php获取本地数据库数据返回给客户端页面

<script type="text/javascript">
    function abc(data){
        console.log(data);
    }
</script>
<script type="text/javascript" src="http://localhost/ajax2/jsonp.php?cb=abc"></script>
php文件

<?php
$conn = mysqli_connect("localhost","root","","html5-7");
$conn->query("set names utf8");
$cb = $_GET['cb'];//获取函数名
$sql = "SELECT * FROM user";
$ret = $conn->query($sql);
$arr = array();
while($row = $ret->fetch_assoc()){
    $arr[] = $row;
}
//数组转换weijson格式
$str = json_encode($arr);
echo $cb."({$str})";

返回给客户端的结果:



3.跨域访问数据举例

访问百度搜索数据,比如返回百度搜索游戏的结果

打开百度首页,同时代开网页debug,切换到Network,在百度搜索框中输入关键字游戏时会发现nerwork下面不断有数据变化,在name那一栏下找到su?wd开头的数据点击打开它的头部信息,把Request URL请求的地址取出,不要wd=XXXcd=XXX中的XXX分别替换为”游戏”和”abc”,作为jsonp跨域访问的地址,其中wd为百度搜索关键字,cb为回调函数。

例如取出的地址为https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&json=1&p=3&sid=1434_18195_21093_18560_21804_21553&req=2&pbs=%E4%BC%98%E9%85%B7&csor=0&cb=jQuery110203815173300440866_1483450049958&_=1483450049971

替换掉关键字和回调函数后为https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=游戏&cb=abc

 

这样一个jsonp跨域访问页面代码可以这样写:

<script type="text/javascript">
    function abc(data){
        console.log(data);
    }
</script>
<script type="text/javascript" src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=游戏&cb=abc"></script>

打印结果为:



1
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:66009次
    • 积分:2335
    • 等级:
    • 排名:第16091名
    • 原创:158篇
    • 转载:41篇
    • 译文:4篇
    • 评论:20条
    博客专栏
    最新评论