码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript入门(三)

时间:2019-10-23 11:12:21      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:frame   ice   执行   UNC   回调   refresh   好的   出现   页面   

JavaScript入门篇—JSONP的应用

什么是JSONP

个人理解:将服务器端返回的json数据封装成JavaScript对象,非正式传输协议。

JSONP解决了什么问题

Ajax不支持跨域请求。JavaScript在请求ajax的时,URL的请求域名和当前页面完全一致。跨域是指:协议、域名、端口一致。而JSONP的出现解决了跨域请求。

JSONP为什么可以解决跨域请求

Web页面调用JS文件时不受跨域的影响,还有拥有src这个属性的标签也一样不受跨域影响。<script>、<img>、<iframe>,而且<script>标签里的内容会被自动执行。因此在服务端把json数据封装成一个JavaScript对象。

JSONP的使用

http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice为例

  • 服务器端创建JavaScript对象(类似这样):

String callbackFunction=request.getParameter(“callback”);            //获取回调方法名refreshPrice

//将json数据封装成JavaScript对象refreshPrice({"0000001":{"code": "0000001", ...} }); 

Return result=callbackFunction+”(“+json+”)”;         

 

  • 在JavaScript中准备回调函数refreshPrice (data).
function refreshPrice(data) {
    var p = document.getElementById(‘test-jsonp‘);
    p.innerHTML = ‘当前价格:‘ +
        data[‘0000001‘].name +‘: ‘ + 
        data[‘0000001‘].price + ‘;‘ +
        data[‘1399001‘].name + ‘: ‘ +
        data[‘1399001‘].price;
}

 

  • 给页面动态添加<script>
function getPrice() {
    var
        js = document.createElement(‘script‘),
 
        head = document.getElementsByTagName(‘head‘)[0];
    js.src = ‘http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice‘;
    head.appendChild(js);
}

这个function被执行时,在head标签里追加

<script src="http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice"></script>。

当web页面被加载执行该<script>时,相当于执行<script>refreshPrice({"0000001":{"code": "0000001", ... });<script>

而<script>里的内容会被自动执行,此时调用准备好的refreshPrice回调函数获取json数据。

             

JavaScript入门(三)

标签:frame   ice   执行   UNC   回调   refresh   好的   出现   页面   

原文地址:https://www.cnblogs.com/ZM191018/p/11724843.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!