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);

转载于:https://my.oschina.net/PandaTsui/blog/755987