JSONP

Posted 2020-10-13 seafwg

JSONP：原理:
JSON with Padding
1.script标签
2.用script标签加载资源是没有跨域问题的

在资源加载进来之前先设置一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些数据处理。
然后需要的时候通过script标签加载对应远程文件资源，当远程文件被加载进来的时候，就会执行我们前面定义好的函数，并且把数据当作这个函数的参数传递进去。

function Fn(data) {//这个函数是全局的
    alert(data);
}

oBtn.onclick = function() {
    var oScript = docuemnt.createElement("script");
    oScript.src = "1.txt";
    document.body.appendChild(oScript);
}//所用时添加。

 

1.txt:
Fn({data});


jQuery的ajax：

jQuery.ajax([setting]);
type : 类型，"POST"或者"GET",默认是"GET"
url : 发送请求的地址，
data : 是一个对象，连同请求发送到服务器的数据
dataType : 预期服务器返回的数据类型，如果不定。jQuery将自己根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为"json"
success : 是一个方法，请求成功后的一个回调函数，传入返回后的数据，以及包含成功代码的字符串。
error : 是一个方法，请求失败时的调用函数。出入XMLHttpRequest对象。

jQuery中的JSONP：

$.ajax({
    type : "GET",
    url : "xxx.php?num="+$(‘#keyword‘).val(),
    dataType : "jsonp",
    jsonp : "callback",//后端也要设置GET为callback
    success : function(data) {},
    error : function(jqXHR) {
        alert("发生错误：" +jqXHR.status);
    }
});