跨域問題

1.跨域簡介

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);
            }
        })


    })

但是在network裏能看到數據，只是瀏覽器不允許在頁面顯示

2.怎麼實現跨域

瀏覽器中的<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>

3.$.ajax()解決跨域問題

 $("#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());
                    }
                }
            })
        })
    })

4.檢索

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();
        }
    })
上述代碼實現類似百度、必應等檢索功能。