美文网首页
实现本地链接网站数据库

实现本地链接网站数据库

作者: 杨溢阿 | 来源:发表于2017-04-22 18:38 被阅读0次

    单纯使用前端的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>'));

    });

    }

    });

    });

    });

      相关文章

        网友评论

            本文标题:实现本地链接网站数据库

            本文链接:https://www.haomeiwen.com/subject/lfrszttx.html