JSONP解决Ajax跨域请求问题

JSONP解决Ajax跨域请求问题

　　浏览器同源策略：

　　　　同源策略是值，当浏览器上发送XMLHttpRequest请求时，只能到自己所请求的服务器本地获取数据。

　　　　不能通过URL访问其他的服务器请求数据。如果请求后，浏览器会阻止响应。

　　　　为了解决此问题，诞生了JSONP机制。

　　JSONP：

　　　　是一种机制，方法。并不是一种数据类型。

　　　　原理:在HTML中，src属性请求不同源的数据是可以的。根据次原理，JSONP会随机生成一个script块，里面包含src属性。

　　　　　　　　当通过生成的script块通过src获取到数据后，再删除掉script块。

　　　　　　同时限制条件：在后端响应数据的时候，数据必须要以一个script函数的方式包裹起来，再返回。

　　　　　　　浏览器在接收数据的时候，将带有函数名的数据，在script中需要定一个相同函数名来处理得到其中的数据。

JSONP的使用

　　　　　　在jQuery中，已经将JSONP的方法写好了。通过jQuery的ajax方式请求数据即可。生成和删除script的代码就不需要自己再写。

function submit(){
    $.ajax({
        # 请求的不同源地址
        url:'http://www.baidu.com',
        # 请求的方式。这里不管设置为任何方式都会被jsonp修改为get方式。
        type:'GET',
        # 设置使用jsonp机制
        dataType:'jsonp',
        # 设置返回的函数名的字段
        jsonp:'callback',
        # 设置返回的函数名
        jsonpcallback:'func'
})
}

function func(arg){
        console.log(arg);
}

　　　　在后端数据返回时必须要将数据包裹在一个script函数中。但是这个函数名别人怎么获取到呢。

　　　　所以，开发人员达成一个共识。在访问的时候，带上想要得到的包裹的函数名是什么，后端获取到你想要的函数名。

　　　　　　　callback参数就是用来传递你想要的函数名的。