JavaScript入门

Posted 2021-03-25 !>Mon<!

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数据。