浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用

下面我来详细讲解“浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用”的完整攻略。

一、什么是 JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。JSON 数据格式如下所示：

{
    "name": "Michael",
    "age": 27,
    "gender": "male"
}

其中，大括号 {} 表示对象，冒号 : 分隔对象的键值对，逗号 , 分隔多个键值对，双引号 " 表示值为字符串类型。

二、JSON 和 JSONP 的区别

JSON 和 JSONP 都是数据格式，两者的区别主要在于使用场景和跨域问题。

1. JSON 的使用场景

JSON 对象只能用于同源数据传输，即数据的发送和接收只能在同一个域名或者同一子域名下进行。

2. JSONP 的使用场景

JSONP（JSON with Padding）是 JSON 的一种应用模式，它允许我们在不同域之间进行数据交互。

JSONP 的实现原理是通过在页面中引用一个外部js脚本，该脚本返回一个 JSON 对象，并将其封装到一个函数调用中，以便在页面中进行解析和使用，因此 JSONP 主要用于跨域 AJAX 请求数据的场合。

三、jQuery 的 ajax jsonp 的使用

jQuery 的 ajax JSONP 能够轻松地提交 JSONP 请求，只需要在 ajax 方法中增加一个 dataType: 'jsonp' 参数配置即可。

jQuery.ajax() 函数的 JSONP 规范遵循与 jQuery.getJSON() 函数类似的约定：

• URL 中必须包含表达式 callback=?，其中 "callback" 可以替换为函数名，jQuery会将此占位符替换为一个生成的唯一字符串，以确保在每个请求中都使用不同的字符串。
• 从服务器返回的数据必须是 JSONP 格式，格式为一个 JSON 对象被包裹在一个函数调用中。例如，对于 callback 参数为 myCallback，返回的 JSON 数据为：myCallback({"name": "Michael", "age": 27, "gender": "male"})。

以下是两个 jQuery 的 ajax JSONP 的示例代码。

1. jQuery ajax JSONP 示例

$.ajax({
    url: 'http://api.jirengu.com/qqfm/getTracks.php',
    type: 'GET',
    dataType: 'jsonp',
    data: {
        album_id: 37104
    },
    success: function(response) {
        console.log(response.data.tracks); // 打印获取到的歌曲列表
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error: ' + textStatus + ' ' + errorThrown);
    }
});

这个例子演示了如何从 http://api.jirengu.com/qqfm/getTracks.php 获取一张专辑的歌曲列表。

2. jQuery ajax JSONP 跨域获取天气预报数据示例

$.ajax({
    url: 'http://v.juhe.cn/weather/index',
    type: 'get',
    dataType:'jsonp',
    data:{
        city: '北京',
        key: '你的 key'
    },
    success:function(data){
        console.log(data.result.today.temperature);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error: ' + textStatus + ' ' + errorThrown);
    }
});

这个例子演示了如何从 http://v.juhe.cn/weather/index 获取天气预报数据，由于涉及跨域请求，需要使用 jQuery 的 ajax JSONP 方法。

以上就是“浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用”的完整攻略了，希望对您有所帮助。