jsonp

发生跨域的情况：

1.当本机请求服务器上数据的时候
2.当本地服务器请求其它服务器数据的时候

跨域：

同源策略：基于浏览器的安全考虑，浏览器各个厂商之间出现了一个约定，这个约定叫做同源策略。这个约定的主要内容就是，域和域之间数据不共通。   
同源是指：同协议、同域名、同端口

jsonp跨域原理：利用script标签

注：

1.jsonp利用script标签实现跨域，而为什么别的标签不行呢，这是因为他们不具有以下特点，引入外部资源、能够解析（a标签没有解析直接跳转了，image标签是解析图片）
2.利用html标签可以跨域的特性，引入外部资源，绕过浏览器的安全策略，实现跨域请求信息
3.只要通过script标签引入，那么会将其中的信息作为js代码执行

xxx.onclick = function(){
  var url = "xxxxxxxxx";

  jsonp(url,function(res){
    console.log(res)
  },{
    user:"admin",
    pass:123456,
    callback:"cbcb",
    columnName:"callback"
  })
}


function jsonp(url,success,data){

  data = data || {};
  var str =  "";
  for(var i in data){
    str += `${i}=${data[i]}&`;
  }
  url = url + "?" + str;
  console.log(url);

  var script = document.createElement("script");
  script.src = url;
  document.body.appendChild(script);

  window[data[data.columnName]] = function(res){
    success(res)
  }
}

ajax—jsonp

 xxxx1.onclick = function(){
     var url = "xxxxxxxxxxxxxxxx";

     ajaxJsonp({
       url:url,
       success:function(res){
         console.log(res)
       },
       data:{
         user:oa.value,
         pass:ob.value,
       }
     }) 
 }
 xxxx2.onclick = function(){
     var url = "xxxxxxxxxxxxxxxxxxxxx";

     ajaxJsonp({
       url:url,
       success:function(res){
         console.log(res)
       },
       data:{
         user:oa.value,
         pass:ob.value,
       },
       type:"post"
     }) 
 }
 xxxx3.onclick = function(){
     var url = "xxxxxxxxxxxxxxxxx";

     ajaxJsonp({
       url:url,
       success:function(res){
         console.log(res)
       },
       error:function(res){
         console.log(res);
       },
       data:{
         user:oa.value,
         pass:ob.value,
         columnName:"callback",
         callback:"qwe"
       },
       type:"jsonp",
       timeout:2000
     }) 
 }




function ajaxJsonp(options){
	//解析参数，处理默认参数
	let {type,url,success,error,data,timeout} = options;
	type = type || "get";
    data = data || {};
    timeout = timeout || 1000;

	//解析要发送的数据
	var str = "";
	for(var i in data){
		str += `${i}=${data[i]}&`;
	}

	//根据发送方式处理url
	if(type == "get" || type == "jsonp"){
		var d = new Date();
		url = url + "?" + str + "sjt=" + d.getTime();
  }
  
  if(type == "jsonp"){

    var script = document.createElement("script");
    script.src = url;
    document.body.appendChild(script);
  
    window[data[data.columnName]] = function(res){
      success && success(res);
      error = null;
    }
    //超时
    setTimeout(()=>{
      error && error("timeout");
      success = null;
    },timeout)
  }else{
      //开启ajax
      var xhr = new XMLHttpRequest();
      xhr.open(type,url,true);
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
          success(xhr.responseText);
        }else if(xhr.readyState == 4 && xhr.status != 200){
          //ajax过程结束了，如果http失败才是真的失败
          error && error(xhr.status);
        }
      }

      //根据发送方式，决定发送的信息
      if(type == "get"){
        xhr.send();
      }else if(type == "post"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(str.slice(0,str.length-1));
      }
  }


}