关闭

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

标签: jsonp访问数据jsonp与ajax区别jsonp跨域访问
742人阅读 评论(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
查看评论

解决ajax不能访问本地文件(利用js跨域原理)

博主自己在开发一个无后台,只有前台的查询系统时,遇到一个困难,如何利用Ajax读取自己的本地json文件,百度、谷歌了下,发现大部分文章都是在说修改浏览器参数,但是自己想想,用户在使用时,还要修改浏览器的参数,这样显然降低了用户体验。自己琢磨了一段时间,发现可以利用js跨域原理来解决这个瓶颈。将之前...
  • farYang
  • farYang
  • 2016-05-01 00:26
  • 19050

jsonp实现json数据跨域访问

为什么会出现json数据跨域访问限制? 这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释: 同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的...
  • a491857321
  • a491857321
  • 2016-10-13 16:42
  • 1329

AJAX 跨域请求 - JSONP获取JSON数据

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest ...
  • andyzhaojianhui
  • andyzhaojianhui
  • 2015-11-16 19:20
  • 1622

Jquery datatable jsonp 显示后台json数据

Jquery datable可以说是最强大的jquery组件,可以提供的配置参数非常之多,基本上可以满足所有的table数据展现。本文会介绍使用jsonp这种方式的数据展现。Jsonp是为了解决跨域JavaScript交互问题,基于浏览器回调JavaScript function方法的机制。 1、...
  • linsongbin1
  • linsongbin1
  • 2015-09-29 20:24
  • 5066

jsonp跨域+bootstrap表格-物流信息显示

素材 http://localhost:8080/项目名/webService名?type=yuantong&postid=884518961670832510&jsonpcallback=123 Jsonp原理: 首先在客户端注册一个callback (如:'jsonc...
  • sixteen_cicle
  • sixteen_cicle
  • 2017-04-10 15:55
  • 552

Jquery调用从ashx文件返回的jsonp格式的数据处理实例

开发环境:vs2010+jquery-1.4.min.js解决问题:网上代码比较少,好多调试不同,返回数据不用json而用jsonp主要考虑解决跨域问题开发步骤:打开VS2010,新建一web站点,保存位置选择D:\Website1;添加新项,选择一般处理程序,命名cmdHandler.ashx;添...
  • xqf222
  • xqf222
  • 2014-03-06 01:13
  • 9758

通过jsonp来实现跨域访问获取数据!!!

通过jsonp来实现跨域访问获取数据的原理是什么?通俗一点就是通过中的src来访问你想要获取数据的网址,并获取数据。(不要问这啥这样做就可以,没有那么多为什么,照着做就行了)。废话补多少,举例子 1创建一个script标签 src中的链接是你要访问的链接 2,在链接后面添加一个参数callback...
  • zqq232206
  • zqq232206
  • 2017-06-05 20:25
  • 283

Ajax通过jsonp实现跨域访问,访问成功但走error不走success

刚开始json的格式: {"dateli":[{"intro":"固定式","remarks":"割发代首","commId":"0006adc3-2b4e-4bbd-9...
  • u010588126
  • u010588126
  • 2015-10-08 16:54
  • 9620

Tornado 支持JSONP的请求封装

由于JSONP强大的跨域访问功能,发现tornado没有对jsonp的默认支持,还好tornado是开源的,就简单实现了一个JSONPHandler,对一切JSONP请求进行封装。 对于jsonp跨域见上一篇文章 tornado对于jsonp的封装主要在finish的时候返回的json是对前端页...
  • jazywoo123
  • jazywoo123
  • 2013-12-31 12:04
  • 1388

Jsonp示例 JQuery.Ajax跨域访问数据

今天耗费大约1天时间折腾异步提交,刚开始没有意识到是跨域访问造成的,后来跟踪了代码,发现请求根本没有发出去,debug发现是权限错误,才意识到跨域访问数据了。 因为JQuery跨域访问是一个很头疼的问题,后来想用弹出窗口,关闭窗口的时候刷新父页面这个方法实现,同样遇到跨域刷新父页面报权限错误。 也许...
  • love_99
  • love_99
  • 2013-04-09 19:13
  • 1540
    个人资料
    • 访问:170208次
    • 积分:3832
    • 等级:
    • 排名:第9919名
    • 原创:203篇
    • 转载:64篇
    • 译文:4篇
    • 评论:26条
    博客专栏
    最新评论