JSONP原理及应用

之前的文章中简单介绍过前端可以实现的跨域方式，这次介绍一种更为常用的跨域方式，但这种跨域方式需要服务器端实现。

JSONP意思是填充式JSON，是JSON的一种跨域应用。实现原理是利用HTML script标签可以获取其他域中的JS代码并执行的特性，因此可以利用这一特性来传送数据。

实现方法

JSONP最常见的应用方式是利用回调函数处理跨域数据。

通过在Script标签的src中，以参数的形式把回调函数发送到服务器中

var script = document.creatElement("srcipt");
script.src = "http://....?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

然后在本地声明函数处理获得的响应数据

function handleResponse(response){
    console.log(response);
}

在服务器端中就可以通过url的参数中获取到回调函数名，通过字符串的拼接，把响应数据以参数的形式传入到回调函数中。一并返回给客户端。

如此一来，客户端的script就能获得如下一段代码，并开始执行。

handleResponse(data);

jQuery中实现JSONP

首先介绍下$.ajax的参数

type：请求方式 GET/POST
url:请求地址
async:布尔类型，默认为true 表示请求是否为异步，如果为false表示为同步。
dataType：返回的数据类型
jsonp：传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success：调用成功执行的函数
error：异常处理函数

如上，jQuery中JSONP的实现为

function SendData() {  
    $.ajax({  
        type: "get",  
        async: false,  
        url: "/home/ReturnJson",  
        dataType: "jsonp",  
        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)  
        jsonpCallback: "receive",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据  
        success: function (data) {  
            alert(data.name);  
        },  
        error: function () {  
            alert('fail');  
        }  
    });  
}