跨域问题

Ajax是后台交互，后台与前端交互都是使用ajax，在实际开发中，往往不是后台给php去连接，而是一个API，
但是直接访问API,会出错（）
eg：
 $(function(){
        $.ajax({
            type:"get",
  //下边的地址就是API接口，
            url:"http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101010100",
            success:function(data){
                console.log(data);
            }
        })


    })

浏览器中的<script>可以无限制的跨域访问，这是一个漏洞。例如引用静态资源库里的jquery
所以，可以利用这个漏洞解决跨域。
eg：
 <script>
    //利用script标签实现跨域的数据访问，在接口后边加“&_jsonp=abc”,其中abc是一个回调函数的名字
    var url = "http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101010100&_jsonp=abc";
    var scri = document.createElement("script");
    scri.setAttribute("src",url);
    document.body.appendChild(scri);
    function abc(data){
        console.log(data)//这样就拿到了数据
    }
</script>

 $("#btn").click(function(){
            $.ajax({
                   type：请求方式 GET/POST
                   url:请求地址
                   async:布尔类型，默认为true 表示请求是否为异步，如果为false表示为同步。
                   dataType：返回的数据类型
                   jsonp：传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
              //这里不是标注数据格式，而是帮你处理数据，
              //你要json，他就帮你用JSON.parse处理好再给你，你用jsonp，他就自动帮你在后台创建回调函数处理好给你
                   jsonpCallback：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                   success：调用成功执行的函数
                   error：异常处理函数
              })
        })
eg：
$(function(){
        $("#btn").click(function(){
            $.ajax({
                type:"get",
                url:"http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&code=101010100&_jsonp=abc",
                dataType:"jsonp",
                jsonp:"callback",
                jsonpCallback:"abc",
                success:function(data){
                    console.log(data)
                    for(var i=0;i<data.weather.length;i++){
                        $("<p></p>").appendTo($("body")).text(data .weather[i].date+"---"+data .weather[i].info.day.toString()+"---"+data.weather[i].info.night.toString());
                    }
                }
            })
        })
    })

eg：
$("#info").keyup(function(e){
        $(".list").empty();
        //ajax请求数据
        if(e.keyCode==32){
            $.ajax({
                type:"get",
                url:"https://....?wd="+$(this).val(),//API接口
                dataType:"jsonp",
                jsonp:"cb",//从network看接口回调函数的名字
                success:function(data){
                    for(var i=0;i<data.s.length;i++){
                        var a_tag = $("<a></a>");
                        var li_tag=$("<li></li>");
                        a_tag.html(data.s[i]).attr("href","http://......&wd="+data.s[i]);
                        a_tag.appendTo(li_tag);
                        li_tag.appendTo($(".list"));
                    }
                }
            })
        }
    });

    $(".list").on("mouseenter","li",function(){
        $("#info").val($(this).text());
    });

    $("#search").click(function(){
        if($("#info").val()!=""){
          //设置浏览器的地址,实现跳转。
            window.location.href = "https://.....&wd="+$("#info").val();
        }
    })
上述代码实现类似百度、必应等检索功能。