单纯使用前端的ajax是不能跨域的,为了安全,只能在同一个域名下访问东西,Ajax的核心是通过XmlHttpRequest回去非本页内容,一般一个项目都是在一个域名下,但有些情况是不一样的,现在上市公司越来越多了,那上市公司的特点有集团公司,下属有很多分公司,他们都可能持有不同的域名,如果主公司想获取子公司的公司就很难取,因为不能跨域,所以这个时候有两种方法,一个是后台设置这个功能,第二点就是利用jsonp实现跨域。jsonp的原理是动态创建script标签,然后在全局声明一个函数用来接收数据,来调用服务器提供的js脚本,所以说ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以跨域,jsonp本身也不排斥同域的数据获取,ajax和jsonp这两种技术看起来很像,目的也都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行封装,下面实现一个用原生代码在本地连接上百度的数据库,只写了js部分;
var oUl=null;
function show(json){
var arr=json.s;
oUl.innerHTML='';
for(var i=0;i
var oLi=document.createElement('li');
oLi.innerHTML=arr[i];
oUl.appendChild(oLi);
}
}
window.onload=function(){
var oT=document.querySelector('#t1');
oUl=document.querySelector('#ul1');
oT.onkeyup=function(){
var str=this.value;
var oScr=document.createElement('script');
oScr.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+str+'&cb=show';
document.head.appendChild(oScr);
}
}
jq实现:
$(function(){
var oT=$('#t1');
var oUl=$('#oUl');
oT.keyup(function(){
var str=oT.val();
$.ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',
data:{wd:str},
dataType:'jsonp',
sonp:'cb',
success:function(res){
oUl.html('');
$.each(res.s,function(){
oUl.append($('<li>'+this+'</li>'));
});
}
});
});
});
网友评论