我所理解的json和jsonp

時間 2019-11-12

原文原文鏈接

一，jsonjavascript

json是什麼我就不過多闡述，咱們利用ajax不少時候都是拿到json格式數據，而後結合dom顯示到頁面到中，因此json是一種數據格式，而且咱們能夠把他的形態寫出來：css

var jsondata=[
    {'aa':111,'bb':111111},
    {'aa':222,'bb':111111},
    {'aa':333,'bb':111111},
    {'aa':444,'bb':111111},
    {'aa':555,'bb':111111},
    {'aa':666,'bb':111111},
    {'aa':777,'bb':111111},
    {'aa':888,'bb':111111},
    {'aa':999,'bb':111111},
    {'aa':123,'bb':111111},
    {'aa':456,'bb':111111},
    {'aa':789,'bb':111111},
    {'aa':987,'bb':111111},
    {'aa':654,'bb':111111},
    {'aa':321,'bb':111111},
    {'aa':556,'bb':111111},
    {'aa':223,'bb':111111},
    {'aa':112,'bb':111111},
    {'aa':889,'bb':111111},
    {'aa':778,'bb':111111},
    {'aa':998,'bb':111111},
    {'aa':447,'bb':111111},
    {'aa':852,'bb':111111},
    {'aa':741,'bb':111111},
    {'aa':963,'bb':111111},
    {'aa':369,'bb':111111},
    {'aa':258,'bb':111111},
    {'aa':147,'bb':111111},
    {'aa':753,'bb':111111},
    {'aa':159,'bb':111111},
];

看到廬山真面目，咱們操做他是很是容易的，這就是json，數據的一種格式。html

二，jsonpjava

多了個屁（p），這個就不是格式了，而是一種手段。jquery

咱們確定聽聞jsonp跨域請求，咱們實際中有沒有用過，其實咱們在使用谷歌和百度的靜態jq類庫是jsonp的處理（我不知道對不對）。ajax

看下面的處理：json

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jsonp</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div id="jj">jsonp</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 alert($("#jj").html());
});
</script>
</html>

咱們引用百度的靜態庫，咱們發現和在本地使用jq類庫同樣，均可以處理，百度的js文件被使用就是跨域了。跨域

進一步，若是這個js文件裏面存放了咱們json的數據，咱們拿到這個js文件其實也就跨域拿到了裏面的數據去使用。app

因此說jsonp是一種技術手段，利用了.js文件的跨域性，來實現各類處理。dom