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

1．jsonp简介

json 是一种数据格式

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

1）什么是jsonp

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

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

2）与ajax的区别

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

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

3、所以说，其实ajax与jsonp的区别不在于是否跨域，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=XXX和cd=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>
打印结果为：