ajax跨域解决方案（一）：JSONP

需求分析

• 获取豆瓣电影的api接口的数据

• 接口URL地址： http://api.douban.com/v2/movie/top250?start=6&count=10

解决方案

• 选择常见方案JSONP

• 实现方式一：使用jQuery中的$.getJSON方法获取数据

• 实现方式二：使用jQuery中的$.Ajax方法获取数据

• 实现方式三：使用原生JS实现JSONP

方法一：$.getJSON

$.getJSON("https://api.douban.com/v2/movie/top250?callback=?", {

// 上面的callback是指的回调函数名的参数名(一般默认为:callback)，供后台获取参数判断时候使用

// callback后面的问号，是让系统随机帮你生成jsonp回调函数名，当然你也可以自定义去设置函数名，详情见方法三。

"start": 6,// 传到后台的参数

"count": 10// 传到后台的参数

}, function (json) {

console.log(json);//输出JSON格式数据

},"json");

方法二：$.Ajax

$.ajax({

type: 'get',

async: true,//默认是异步

url: 'https://api.douban.com/v2/movie/top250?start=6&count=10',

dataType: 'jsonp',

jsonp: 'callback',//回调函数名的参数名(一般默认为:callback)，供后台获取参数判断时候用

jsonpCallback: "getMovieListFn",// 这次自定义了回调函数的函数名，底层掉的时候是掉这个函数的。

success: function (data) {

console.log(data)

},

error: function (data) {

alert("error");

}

});

方法三：原生JS实现JSONP

// 自定义一个名为handleResponse的函数，并定义形参response，请求成功后执行这个函数

function handleResponse(response){

console.log(response)；// 输出数据

}

var hm = document.createElement("script");

// 给这个动态创建的script的标签，添加src地址

// 并指定callback调用的函数为handleResponse，这样数据请求成功后就会自
// 动去调用上面的handleResponse函数

hm.src = "http://api.douban.com/v2/movie/top250?start=6&count=10&callback=handleResponse";

// 获取页面中第一个script标签。

var s = document.getElementsByTagName("script")[0];

// 把动态创建的这个script标签放在document中所有script标签的最前面。

s.parentNode.insertBefore(hm, s);