JSONP

JSONP

起始JSONP并不是通过AJAX实现，而是通过script标签的加入。我们知道通常在标签中src指向地址时，是可以直接通过的，而不需要考虑跨域

1、jsonp是通过创建script标签并且放在页面中，然后给通信地址就可以完成通信
var script=document.createElement("script");
script.src="地址";
document.body.appendChild(script);
2、jsonp通过地址传参方式将数据发送给服务端
3、jsonp在地址最后描述一个参数的值是一个函数名，通过执行该函数完成服务端到前端

跨域  当前后端ip或者端口不同时，就叫做跨域
解决跨域问题
orss方法 在服务器设置响应头Access-Control-Allow-Origin是指定的地址或者*

jsonp方法 
服务代理方式 客服端请求服务端时如果出现端口和ip不同就算跨域。
但是服务端请求服务端就不算跨域   可以在客户端的相同ip和端口的服务中创建一个服务器
前端访问本地的服务器，然后由本地的服务器做中介与远程服务通信，然后回传

// jsonp方法
// jsonp 和 json没有关系
// jsonp和ajax也没关系

// function fn1(a,b){
//     console.log(a,b);
// }

function jsonp(data){
    var str="?";
    for(var prop in data){
        str+=prop+"="+data[prop]+"&";
    }
    str=str.slice(0,-1);
    var script=document.createElement("script");
    script.src="http://localhost:8000"+str+"&callback=fn1";
    console.log(script.src);
    document.body.appendChild(script);
}
jsonp({a:10,b:20});

百度搜索提示

function callback(data){
    console.log(data);
}
var script=document.createElement("script");
script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=王羲之&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
document.body.appendChild(script);

jQuery使用jsonp

var baidu={
    sug:function(data){
        console.log(data);
    }
}

$.ajax({
    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
    data:"wd=剑与远&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0",
    dataType:"jsonp",
    jsonp:"callback",
})

// 通过jQuery的ajax方法设置datatype和jsonp就可以完成jsonp通信

// 涉及到跨域问题报错
// $.getJSON("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=剑与远征&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback",function(data){
//     console.log(data);
// })