jsonp的原理及应用

jsonpjsonp的全称是带Padding的JSON，是一个跨域资源请求的解决方案。在很多情况下，我们需要从客户端获取服务器数据进行操作。通常，我们将使用ajax webservice来实现这一点。但是，如果我们想要获取的数据与当前页面不是同一个域，那么著名的同源策略(不同域中的客户端脚本在没有明确授权的情况下无法读写对方的资源)会因为安全原因而拒绝请求，即我们无法直接向其他域发送请求来获取资源。localhot域中有一个books.php，里面包含一个脚本，向test.com域中的books.php发送get请求，希望获取其书单资源。这是一个跨域请求资源。复制的代码如下： $。Ajax ({type:' get '，URL 3360 ' http://test.com/books . PHP ' })；该页面将报告这样一个错误：xmlhttprequest无法加载http://test.com/books.php.原点http://localhost不被access-control-allow-origin允许。jsonp似乎解决了这个问题。虽然jsonp的原理受到同源策略的限制，但并不是HTML中的所有资源都必须属于同一个域。我们的常用页面使用谷歌或微软的jQuery CDN来节省流量或加载速度。在页面上，我们可以这样写来引用jQuery。复制的代码如下： Script type=' text/JavaScript ' src=' http :http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 7 . 1/jquery . min . js '/script iframe、img、style、script等元素的src属性可以直接向不同的域请求资源。jsonp正式使用脚本标记的简单实现来跨域请求资源。localhost的books.xml希望获得域test.com的图书列表，域test.com的图书列表存储在books.xml中test.com/books.xml副本的代码如下：xml版本='1.0 '？books book name=' JavaScript : The definitive Guide ' publisher=' O ' Reilly Media，Inc . ' author David Flanagan/author/book book name=' PHP和MySQL Web Development ' publisher=' Perason Education ' author Luke Welling/author Laura Thomson/author/book name=' http : The definitive Guide ' publisher=' O ' Reilly Media，Inc . ' author David courley/author Brian totty/author/book/book显然JavaScript拿不到书实际上，像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['回调']；echo ' $ callbackFn($ JSON)；'；这样，xml文件的内容被转换成一个json对象。复制的代码如下： { ' book ' :[{ ' @ attributes ' : { ' name ' : ' JavaScript 3360 the亏导'。publisher':'O'Reilly Media，Inc.'}，' author':'David Flanagan'}，{ ' @ attributes ' : { ' name ' : ' PHP和MySQL Web Development '，' publisher ' : ' Perason Education ' }，' author':['Luke Welling '，' Laura Thomson']}，{ ' @ attributes ' : { ' name ' 33: ' http 33366当然，test.com不知道拼接方法的名称。在发送请求时，localhost需要在url中传入一个名为callback的参数(这是可选的，只需同步双方即可)。

看看本地主机怎么发送请求吧localhost/books.php复制代码代码如下：DOCTYPE html html标题图书/标题？PHP include('/components/header include。PHP’)；/head style type='text/css ' .书名{ font-size : 15px字体粗细：加粗；页边距-top :6 px；} .book-info { color : # CCC；字体样式：斜体；边框-底部：破折号1px # CCC}/style/head body div style=' margin 336020 px；'div style=' font-size :16 px'字体粗细：加粗；books/div div id=' books '/div/div/body/html我们希望在编号为书的差异中展示所有书，先添加一个用以显示书的爪哇岛描述语言函数，也就是获取到数据后的回调函数，结合上面拼接的json格式可以这么写复制代码代码如下：功能显示书籍(books){ var books=books。书；var book容器=文档。getelementbyid(' books ')；for(var I=0；ibooks . lengthi){ var tmp=Array()；tmp。push(' div class=' book-title ' ' books[I][' @ attributes ']).名称/div ')；tmp。push(' div class=' book-info ' ')；tmp。push(' div publisher : ' books[I][' @ attributes '].publisher '/div ')；tmp。push(' Diauthor(s): ')；如果(书籍类型[i].作者=='string'){ tmp.push(books[i]).作者);}else{ var authors=books[i].作者；for(var j=0；jauthors.lengthj ){ tmp.push(作者[j]' ')；} } tmp。push('/div ')；//作者tmp .推送的结尾('/div ')；//图书信息图书容器。innerhtml=tmp。join(' ')；} }然后是关键的jsonp请求的方法了复制代码代码如下：函数getBooks(){ var script=document。create element(' script ')；script.setAttribute('type '，' text/JavaScript ')；script.setAttribute('src '，' http://test.com/bookservice.php?callback=显示书籍')；document.body.appendChild(脚本);} GetBooks()；在getbooks()方法中动态创建了一个脚本标签，设置其科学研究委员会为test.com提供的获取数据的服务接口并传入回调函数，这样我们可以看看页面的反应，在铬控制台下可以看到这条请求

我们可以在localhost 下获取test.com的书籍。

jquery的实现也将jsonp封装在jquery中，但是jquery将其放入ajax中。我不知道为什么。毕竟这个东西和ajax不一样。编写jQuery版本的副本代码如下：函数getbooks () {$。Ajax ({type:' get '，URL 3360 ' http://test.com/bookservice.php', datatype 3360 ' jsonp '，jsonp:' callback '，jsonp callback。}看起来完全一样，但是方便多了，这样就不用自己创建脚本标签，并且指示dataType是jsonp，回调函数不放在url中，而是分别用两个参数指示。安全问题当然，使用jsonp会在一定程度上造成安全问题。如果请求的站点不是新的站点，则返回的方法调用中可能包含一些恶意代码。因此，请尝试向受信任的站点发送请求。此外，xss经常使用jsonp向网站注入恶意代码。